时间戳

首页 > 解决方案 > 悬停时两个不同元素的转换延迟反转

css - 悬停时两个不同元素的转换延迟反转

问题描述

我需要一个过渡，其中悬停序列是 ABBA 而不是 ABAB。

这是我为演示而制作的小提琴：

https://jsfiddle.net/m8vrLtx7/1/

这是代码：

div{
  height: 10rem;
  width: 10rem;
  background: red;
  border-radius: 100%;
  margin: 3rem;
  position: relative;
}

div:before,
div:after{
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  border-radius: 100%;
  transform: scale(0);
  transition: transform .3s;
}

div:after{
  background: blue;
  z-index: 1;
}

div:before{
  width: calc(100% - 1rem);
  height: calc(100% - 1rem);
  top: .5rem;
  left: .5rem;
  background: pink;
  z-index: 2;
  transition-delay: .1s;
}

div:hover:before,
div:hover:after{
  transform: scale(1);
}

我需要的是最后一个动画的内圈（粉红色的那个），但是在悬停时我希望它首先出现。

有没有办法做到这一点，只有CSS？

标签： css

解决方案

您可以通过为 normal 和 :hover 状态指定不同的值，在两个“方向”上添加转换延迟。当元素进入各自的状态时，每一个都将应用。

我在这里将您示例中的值增加了 10 倍，以便我们可以更轻松地观察正在发生的事情，但您可以再次加快速度。

因此，当元素进入:hover 状态时，您只需延迟粉红色 :before 圆圈上的过渡。而蓝色的则相反。

div{
  height: 10rem;
  width: 10rem;
  background: red;
  border-radius: 100%;
  margin: 3rem;
  position: relative;
}

div:before,
div:after{
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  border-radius: 100%;
  transform: scale(0);
  transition: transform 3s;
}

div:after{
  background: blue;
  z-index: 1;
  transition-delay: 1s;
}

div:before{
  width: calc(100% - 1rem);
  height: calc(100% - 1rem);
  top: .5rem;
  left: .5rem;
  background: pink;
  z-index: 2;
}

div:hover:before,
div:hover:after{
  transform: scale(1);
}
div:hover:before {
  transition-delay: 1s;
}
div:hover:after {
  transition-delay: 0s;
}
<div></div>

推荐阅读