CSS轉換立即進入最終狀態

我自動啓動CSS轉換時出現問題。通常這是通過向正在動畫的元素添加一個類來完成的。我正在通過jQuery動態創建我的元素。在創建元素後立即添加類時，它會立即將其轉換爲最終狀態，而不進行轉換。它只有當我添加一個短暫的延遲時纔有效。不是很好，這可以以不同的方式完成嗎？CSS轉換立即進入最終狀態

function startbullet() { 
 
    var bullet = $('<div class="bullet"></div>'); 
 
    $("#wrapper").append(bullet); 
 
    setTimeout(function() { bullet.addClass("animate"); }, 10); 
 
} 
 
setInterval(startbullet, 2000);

#wrapper { 
 
    height: 400px; 
 
    position: relative; 
 
} 
 
.bullet { 
 
    position: absolute; 
 
    top: 10px; 
 
    left: 10px; 
 
    width: 20px; 
 
    height: 20px; 
 
    background-color: #0ff; 
 
    border-radius: 10px; 
 
    transition-duration: 5s; 
 
    transition-timing-function: linear; 
 
} 
 
.bullet.animate { 
 
    top: 150px; 
 
    left: 400px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<div id="wrapper"> 
 
</div> <!-- end wrapper -->

來源

2016-05-10 Sempervivum

這是發生在一個特定的瀏覽器或所有瀏覽器？（例如Firefox，IE，Chrome等） – bwegs

我沒有得到你想要實現的。添加一個類與動畫無關，也許你正在尋找jQuery動畫http://api.jquery.com/animate/ – Michelangelo

好吧，它適合我：http://codepen.io/anon/pen/jqJMpR 不需要關鍵幀或jquery的動畫。 – igwan

使用jQuery.animate提琴只是加入類前

function startbullet() { 
 
    var bullet = $('<div class="bullet"></div>'); 
 
    $("#wrapper").append(bullet); 
 
    bullet.animate().addClass("animate"); 
 
} 
 
setInterval(startbullet, 2000);

#wrapper { 
 
    height: 400px; 
 
    position: relative; 
 
} 
 
.bullet { 
 
    position: absolute; 
 
    top: 10px; 
 
    left: 10px; 
 
    width: 20px; 
 
    height: 20px; 
 
    background-color: #0ff; 
 
    border-radius: 10px; 
 
    transition-duration: 5s; 
 
    transition-timing-function: linear; 
 
} 
 
.bullet.animate { 
 
    top: 150px; 
 
    left: 400px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="wrapper"> 
 
</div>

來源

2016-05-10 20:10:14

很好的解決方案，謝謝你的提示！還不知道可以不帶參數調用動畫。 – Sempervivum

您可以使用關鍵幀動畫，而不是一個過渡，是這樣的：

.bullet.animate { 
    animation-name: bulletIn; 
    animation-duration: 5s; 
    animation-fill-mode: forwards; 
} 

@keyframes bulletIn { 
    0% { top: 10px; left: 10px; } 
    100% { top: 150px; left: 400px; } 
}

這裏是你https://jsfiddle.net/e3hqghv3/

來源

2016-05-10 20:07:49 hidanielle

感謝您的提示和小提琴！工作非常好。通常我不得不接受我不瞭解CSS的一些事情：爲什麼這與動畫一起工作，而不是與轉換一起工作？ – Sempervivum

我想象是因爲沒有真正的轉換，因爲您幾乎在同一時間創建元素並應用這個類。直到元素在頁面上，關鍵幀動畫纔會開始。如果它幫助你，請將答案標記爲已接受！ – hidanielle

Thnanks爲此評論。將兩個答案都標爲已接受。可惜，我不能upvote。 – Sempervivum

根據this blog post，你可以添加類強制重繪之前調用window.getComputedStyle，我想這是jQuery的動畫功能引擎蓋下完成的。

function startbullet() { 
    var bullet = $('<div class="bullet"></div>'); 
    $("#wrapper").append(bullet); 
    window.getComputedStyle(bullet.get(0)).top; 
    bullet.addClass("animate"); 
}

來源

2016-05-10 21:13:23 igwan

感謝您的額外信息！ – Sempervivum

CSS轉換立即進入最終狀態

回答

相關問題