提供微商城·微分销·小程序开店需求
5分钟开通你的微信商城店铺!2017-12-05 作者:黄保
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也未必具有动画属性,或者该属性被篡改。
微信小程序商城系统开发其实很简单,只需要五步就可以完成,整个过程包括开发、上线、发布都可以轻松搞定...详情
推荐文章
微信小程序滚动字幕已经是当下微信小程序开发最热门的话题,下面将从多方面来谈谈微信小程序滚动字幕及弹幕的实现技巧...
2017年6月14日,微信小程序开发教程已经是当下最热门的话题,下面将从多方面来谈谈Array数组对象相关的内容。...
最近在微信社群都可以看到拼多多的拆红包的界面,这又是一款拼多多的裂变营销方式,很多朋友对此表示很怀疑,到底是不...
Hishop最新消息,有这样一个小程序可以无需询问,就知道朋友的位置了,那么是如何定位分享位置的呢。...
天店收银系统有星耀、星云、标准三个版本,每套系统版本的价格都有所不同,价格从800元起,下面小编就为大家从适用业态...
收银系统小程序的开通流程 1. 选择合适的收银软件 目前市场上有多种收银软件提供小程序店铺功能。例如,店益就是一款能...
在互联网高速发展的今天,线上线下一体化的商业模式已成为主流。特别是对于零售行业而言,将收银系统与微信公众号对接...
收银系统对接微信小程序的流程 准备工作:首先,商家需要准备好收银系统和小程序的开发环境。对于收银系统,可以使用...
直接说答案:目前是不能直接推送自己的小程序的。 不过也不是说没有办法,可以通过视频号小店,然后跳转到自己的微信...
第一:线上线下收银系统 线上线下收银系统是一种结合了实体店铺与在线销售渠道的技术解决方案。这种系统不仅提高了收...