0

一般来说，我对 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。我不认为同时应用这两个课程（一个有延迟）可以达到我希望的效果。

4

0 回答 0