注冊登錄

一個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也未必具有動畫屬性,或者該屬性被篡改。

<span style="line-height:2;font-size:16px;font-family:;" "="">
 

 


重磅推薦:小程序開店目錄

第一部分:小商店是什么

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

第三部分:如何登錄小商店

第四部分:開店任務常見問題

第五部分:小商店可以賣什么

第六部分:HiShop小程序特色功能

第七部分:小程序直播

第八部分:小程序收貨/物流

第九部分:小程序怎么結(jié)算

第十部分:小程序客服

第十一部分:電商創(chuàng)業(yè)

第十二部分:小程序游戲開發(fā)

電話咨詢 微信咨詢 預約演示 0元開店