Css3轉換隊列

我想排隊css轉換具有相同的屬性。基本上我想在進行另一次翻譯之前將某個元素翻譯到某個位置（所以過渡時間爲0）。Css3轉換隊列

這是一個樣機，點擊移動（框應移動100像素右，前左平移100像素）

這並不工作，因爲第二過渡覆蓋第一？

這工作（我需要過渡時間非零（0.01）否則transitionend犯規火）。

還有另外一個問題，即轉變結束火災對鉻的2倍，但我可以解決這個問題，我只是想知道是否有更好的方式來寫這個？

我寧願如果我可以寫這沒有結束事件或計時器如果可能？

<div class="box"></div> 
<a href="#" class="move">move</a></a>

來源

2016-10-31 Toniq

更新：

您可以使用CSS3 animation屬性與@keyframes。

.box.animate { 
    animation: move 2s; 
} 

@keyframes move { 
    0% { 
    transform: translate(100px); 
    } 
    100% { 
    transform: translate(0px); 
    } 
}

而且使框移動，你可以添加animate類的元素。或者你可以在javascript中自己設置animation屬性，這取決於你。

box.addClass('animate')

的jsfiddle：https://jsfiddle.net/aqwaypoh/7/

來源

2016-10-31 19:54:18 MakG

這是錯誤的。點擊移動後，框需要在0秒內轉換爲100px左邊的轉換，然後在0.5秒內開始轉換爲0px。這將像box.stop（）。css（'left'，'100px'）;然後box.stop（）。animate（{'left'：0px'}）..... – Toniq

對不起，我誤解了你。我更新了我的答案。 – MakG

添加上第二個條件超時給你想要的東西，我相信。

var box = $('.box'), 
    move = $('.move').click(function() { 
    box.css({ 
     "transform": "translate(100px)", 
     'transition-duration': '0s' 
    }); 

    setTimeout(function(){ 
     box.css({ 
     "transform": "translate(0px)", 
     'transition-duration': '0.5s' 
     }); 
    }, 1); 
    })

來源

2016-10-31 20:10:56

回答

相關問題