一个DOM元素正在动画是什么样的呢？

2017-12-05

导读：2017年6月14日，DOM元素正在动画已经是当下小程序开发最热门的话题，下面将从多方面来谈谈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也未必具有动画属性，或者该属性被篡改。

微信小程序商城系统开发其实很简单

微信小程序商城系统开发其实很简单，只需要五步就可以完成，整个过程包括开发、上线、发布都可以轻松搞定...详情

第二部分：如何开通一个小商店

一个DOM元素正在动画是什么样的呢？

微信小程序商城系统开发其实很简单