一個DOM元素正在動畫是什么樣的呢？
DOM元素正在動畫已經是當下小程序開發最熱門的話題，下面將從多方面來談談DOM元素正在動畫相關的內容。
一般情況下CSS不會直接影響JS的程序邏輯，但是以CSS實現動畫的話，這個便不太確定了，這個故事發生在與UED遷移全局樣式的過程。
if (this.needAnimat && typeof this.animateHideAction == 'function' && this.status != 'hide') {
} else
在所有組件中，如果設置了animatHideAction回調的，便會執行其中的動畫邏輯，針對彈出層來說：
② loading
④ 底部彈出層
① 動畫顯示時下沉，隱藏時上浮
③ 組件底部彈出
cm-fade-in, .cm-fade-out, .cm-down-in, .cm-down-out, .cm-up-in, .cm-up-out {
animation-duration: 0.3s;
animation-fill-mode: both;
......
0% {
-webkit-transform: scale(1);
}
opacity: 0;
transform: scale(1.185); -webkit-transform: scale(1.185); -moz-transform: scale(1.185); -o-transform: scale(1.185);
}
這個時候我們要實現一個居中彈出層漸隱的效果事實上只需要這樣做：
el.one($.fx.animationEnd, function () {
el.hide();
在動畫結束后將對應的動畫class移除，再執行真實的hide方法，隱藏dom結構。
el.addClass('cm-fade-out');
el.removeClass('cm-fade-out');
}, 340);
第一反應都是認為animationEnd比較合理，于是我最近遇到了一個問題：
于是我開始愉快的定位，當時搞了一會，發現loading的動畫沒有執行，仔細一定位，發現css中的動畫相關的css丟了，于是造成的結果是：
這個代碼變成了單純的class增加，并沒有執行動畫，也就是，animationEnd的事件沒有觸發，于是沒有執行hide方法，所以loading框就一直在那里轉
這里如果使用setTimeout的話雖然感覺沒有animationEnd嚴謹，但是一定會保證這邏輯代碼執行，從某種程度來說，似乎更好，這里的優化代碼是：
el.addClass(scope.animateOutClass);
isTrigger = true;
el.hide();
setTimeout(function () {
el.removeClass(scope.animateOutClass);
el.hide();
如果animationEnd執行了便不理睬setTimeout，否則便走setTimeout邏輯，也不至于影響業務邏輯，但是這個似乎不是最優解決方案。
所以，javascript檢測CSS的某一個className是否存在，似乎變成了關鍵，但是就算就算能找到具有某class，這個class也未必具有動畫屬性，或者該屬性被篡改。
-
微信小程序商城系統開發其實很簡單
微信小程序商城系統開發其實很簡單，只需要五步就可以完成，整個過程包括開發、上線、發布都可以輕松搞定...詳情
第二部分：如何開通一個小商店
立即掃碼關注
咨詢電話：4006-089-731