jQuery .html（）完成時CSS動畫轉換

我想要做的是追加一個容器，用內容填充它，然後通過刪除一個類並讓CSS通過一個轉換處理它來爲其添加動畫。我可以做所有這些，除了動畫它。我認爲它可能是某種競爭條件或類似的東西，因爲如果我把setTimeout（）放在類中去，它就會生成動畫。下面是一個小提琴這兩個例子：jQuery .html（）完成時CSS動畫轉換

http://jsfiddle.net/38q7A/3/

HTML

<div class="test1">test 1</div> 

<div class="container"></div>

CSS

.flyin { 
    -webkit-transition: all 1s ease-in-out; 
    -moz-transition: all 1s ease-in-out; 
    -ms-transition: all 1s ease-in-out; 
    -o-transition: all 1s ease-in-out; 
    transition: all 1s ease-in-out; 
} 

.left { 
    position: fixed; 
    -webkit-transform: translateX(-100%); 
    -moz-transform: translateX(-100%); 
    -ms-transform: translateX(-100%); 
    -o-transform: translateX(-100%); 
    transform: translateX(-100%); 
}

的JavaScript

function test1(){ 
    $(".container").append("<div class='flyin left'></div>"); 
    $(".flyin").html("this is test content"); 
    $(".flyin").removeClass("left"); 
};

來源

2013-03-17 Dan

有趣的問題 – Alp 2013-03-17 21:08:40

我不知道是否更改HTML是一種選擇，但你可以有一個空的飛左元前產生的，只有觸發點擊動畫http://jsfiddle.net/uHPmc/1/

<div class="container"> 
    <div class="left flyin"></div>  
</div> 

function test1(){ 
    $(".flyin").html("this is test content"); 
    $(".flyin").removeClass("left"); 
    $(".container").append("<div class='flyin left'></div>"); 
};

來源

2013-03-17 21:40:24

我也嘗試過這一個，它的工作，但我寧願不在網頁上的HTML，我不需要馬上。任何想法爲什麼這個工程追加它？我認爲append是一個同步調用。 – Dan 2013-03-17 21:44:33

我想我越來越接近找出問題所在。它看起來像將類似「離開」的類放在頁面之外，在我刪除它之前沒有對它進行評估。要麼是，要麼是動畫不是。 http://jsfiddle.net/38q7A/11/ – Dan 2013-03-17 22:09:25

我認爲它只是同步的，你可以在dom樹中使用對象，但渲染只發生在事件處理器之後，這也從性能透視。 – 2013-03-17 22:11:55

jQuery .html（）完成時CSS動畫轉換

回答

相關問題