Question

我对CSS和Web技术一般都很陌生，我将实现一个标签式导航栏指示器。现在，我正确使用动画过渡。例如：

What I have:
From tab 2 to tab 3
Start of animation
| T1 | T2 | T3 |
      ----
Middle of animation
| T1 | T2 | T3 |
        ----
End of animation
| T1 | T2 | T3 |
           ----

What I want:
From tab 2 to tab 3
Start of animation
| T1 | T2 | T3 |
      ----
Middle of animation
| T1 | T2 | T3 |
      --------- (Grow from prev tab to next tab)
End of animation
| T1 | T2 | T3 |
           ---- (Shrink to selected tab)

一切顺利动画。我通过添加到边距的转换来实现我使用CSS的内容，该边距根据选择的选项卡而变化。我尝试添加另一个延迟转换来实现我想要的，但是当我添加转换类（我使用Enyo）时，它们似乎同时被应用，并且它们都没有按预期工作。我正在添加两个，一个具有立即开始的转换的类，以及一个在第一个动画结束时有延迟的类，但我猜这样做不支持CSS。

实施此方法的好方法是什么？最好是可重复使用的。感谢。

编辑：一些代码：

adjustSlider: function(){
    if(this.vote == 1){
        this.$.slider.addClass('slider-up-start slider-up-end');
        this.$.slider.removeClass('slider-down-start slider-down-end');

    }
    if(this.vote == -1){
        this.$.slider.addClass('slider-down-start slider-down-end');
        this.$.slider.removeClass('slider-up-start slider-up-end');
    }
},

 .slider-up-start{
background-color: #27AE60;
width: 100%;
margin-left: 0%;
height: .3em;
-webkit-transition: margin-left .3s, width .3s, background-color .3s;
    transition: margin-left .3s, width .3s, background-color .3s;
}

.slider-up-end{
width: 50%;
transition: width .3s;
transition-delay: .3s;
}

.slider-down-start{
background-color: #C0392B;
width: 100%;
margin-left: 0%;
height: .3em;
-webkit-transition: margin-left .3s, background-color .3s;
    transition: margin-left .3s, background-color .3s;
}

.slider-down-end{
width: 50%;
margin-left: 50%;
transition: width .3s, margin-left .3s;
transition-delay: .3s;
}

我现在只测试转换，而不是webkit。我不认为应用这两个类（一个有延迟）的方式是我希望的。

使用CSS和JS实现不断增长和缩小的标签栏动画

0 个答案: