Question

我有几个要素

<div class="nav-link active"><span>Element 1</span></div>
<div class="nav-link"><span>Element 2</span></div>
<div class="nav-link"><span>Element 3</span></div>

活动对象在点击和CSS上会发生变化，从而在活动div下方添加一个红色菱形：

.nav .nav-link.active span::after{
content: "";
width: 120%;
height: 0.14em;
background: red;
transform: skewX(-45deg);
list-style: 0.5em;
display: block;
margin: 0 auto;
position: relative;
left: -20px;
-webkit-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}

，并希望根据div是否包含.nav-link，通过从左侧向左滑动动画来更改该红色菱形在.active上的位置。但是添加：

.nav .nav-link span::after{
    left: -200px;
    -webkit-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
}

似乎不起作用。这是可能的还是我采用了错误的方法？

Answer 1

您可以使用translateX对左幻灯片进行动画处理。

.nav .nav-link.active span::after{
  content: "";
  width: 120%;
  height: 0.14em;
  background: red;
  transform: skewX(-45deg) translateX(100px);
  list-style: 0.5em;
  display: block;
  margin: 0 auto;
  position: relative;
  left: -20px;
  -webkit-transition: all 1s ease-in-out;
  -o-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
}

<div class="nav">
  <div class="nav-link active"><span>Element 1</span></div>
  <div class="nav-link"><span>Element 2</span></div>
  <div class="nav-link"><span>Element 3</span></div>
</div>

是否可以根据变化的类为:: after设置动画？

1 个答案: