一個DOM元素正在動畫是什么樣的呢？

2017-12-05

導讀：2017年6月14日，DOM元素正在動畫已經(jīng)是當下小程序開發(fā)最熱門的話題，下面將從多方面來談談DOM元素正在動畫相關(guān)的內(nèi)容。...

DOM元素正在動畫已經(jīng)是當下小程序開發(fā)最熱門的話題，下面將從多方面來談談DOM元素正在動畫相關(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é)束后將對應的動畫class移除，再執(zhí)行真實的hide方法，隱藏dom結(jié)構(gòu)。
el.addClass('cm-fade-out');

el.removeClass('cm-fade-out');

}, 340);

第一反應都是認為animationEnd比較合理，于是我最近遇到了一個問題：
于是我開始愉快的定位，當時搞了一會，發(fā)現(xiàn)loading的動畫沒有執(zhí)行，仔細一定位，發(fā)現(xiàn)css中的動畫相關(guān)的css丟了，于是造成的結(jié)果是：

這個代碼變成了單純的class增加，并沒有執(zhí)行動畫，也就是，animationEnd的事件沒有觸發(fā)，于是沒有執(zhí)行hide方法，所以loading框就一直在那里轉(zhuǎn)
這里如果使用setTimeout的話雖然感覺沒有animationEnd嚴謹，但是一定會保證這邏輯代碼執(zhí)行，從某種程度來說，似乎更好，這里的優(yōu)化代碼是：

el.addClass(scope.animateOutClass);

isTrigger = true;

el.hide();

setTimeout(function () {

el.removeClass(scope.animateOutClass);

el.hide();

如果animationEnd執(zhí)行了便不理睬setTimeout，否則便走setTimeout邏輯，也不至于影響業(yè)務邏輯，但是這個似乎不是最優(yōu)解決方案。
所以，javascript檢測CSS的某一個className是否存在，似乎變成了關(guān)鍵，但是就算就算能找到具有某class，這個class也未必具有動畫屬性，或者該屬性被篡改。

微信小程序商城系統(tǒng)開發(fā)其實很簡單

微信小程序商城系統(tǒng)開發(fā)其實很簡單，只需要五步就可以完成，整個過程包括開發(fā)、上線、發(fā)布都可以輕松搞定...詳情

第二部分：如何開通一個小商店

一個DOM元素正在動畫是什么樣的呢？

微信小程序商城系統(tǒng)開發(fā)其實很簡單

一個DOM元素正在動畫是什么樣的呢？