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