使用css transition属性实现带动画显示的微信小程序小部件

在我们的实际开发中这样的过渡小部件的效果仍然相对较大，但在开发微信小程序的过程中，一些小伙伴可能会发现转换属性不好（如下所述）所以我们考虑使用wx.createAnimation由微信提供的API来创建动画。

接下来，我将向您介绍如何使过渡属性在这种需求中发挥作用。代码下方

Page（{data: {show: false //用于显示或隐藏控件}，chanMask: function（）{var isShow=this.data.show？false: true; //如果隐藏显示，则隐藏显示此.setData（{show: isShow}）}}）/* index.wxss * //*显示之前* /。mask-con {transition: 1s;位置:已修复;宽度: 100％;身高: 300rpx;左: 0;底部: -300rpx; text-align: center; line-height: 300rpx; box-shadow: 0 1px 10px #aaa;}/*显示后* /。mask-con-show {bottom: 0;}指向我X慢慢飞

在上面的代码中，我们首先在数据中为mask-con控件的显示状态定义一个show变量，在chanMask函数中交替更改此变量，然后将chanMask函数绑定到按钮的click事件并关闭控件。最后，我们根据show决定是否向mask-con（我们的动画控件）添加一个类：mask-con-show。所以我们在这里实现了一个带有转换的隐藏小部件

现在很多APP或小程序都以这种方式关闭弹出窗口控件，那个X用户点是不够的，看到聪明的小朋友在这里可能会想到在mask-con的下层添加另一个阴影控件并绑定设置我们的chanMask函数，使阴影控制和我们的mask-con可能不是一个整体，不够直观，例如，领导者应该让这个阴影有一个显示颜色慢慢加深，隐藏缓慢减少对于光效果，为了处理这种情况，我们调整代码如下：

Page（{data: {show: false //用于显示或隐藏掩码控件}，chanMask: function（）{var isShow=this.data.show？false: true; //如果隐藏显示， hide将显示此.setData（{show: isShow}）}}）/* index.wxss * /.mask-shadow {width: 100％; height: 100％; opacity: 0; transition: 1s;} .mask-shadow-on {Opacity: 0.3;} .mask-con {position: absolute; width: 100％; height: 300rpx; left: 0; bottom: -300rpx;转换: 1s; text-align: center; line-height: 300rpx; box- Shadow: 0 1px 10px #aaa;} .mask-con-show {bottom: 0;}点击我的X慢慢飞行

这里我们设置两个样式类名mask-shadow-on和mask-con-show来定义阴影和主控制mask-con动画的效果（具体代码是根据你自己的需要确定的），似乎一切都是好的，没问题，然后跑一波，艾玛，神马情况？阴影和我们的mask-con直接被粉碎而没有任何过渡效果。影响我们计划效果的原因是什么？经过一番考虑后，博主发现如果显示为none，则transition属性可能无效。一些来到这里的朋友可能会问“Blogger，这不对。我们显然已经将面具的显示设置为一个块。”

在这种情况下，我们的蒙版控件显示它需要一点时间才能完全显示它，但是在我们的变量show设置为true之后，我们的阴影控件和主控件将立即添加动画样式类名。时间比掩码显示所需的时间快，所以我们的机器认为掩码仍在显示中是没有

例如，面具是整个作品的老大。老板尚未完成演出。你们已经出来抢风头了。你让老板的脸走到尽可能的地方，但我必须抓住你。我将摆脱所有的风头，看到你仍然必须。关于这个老板的谈话并不多。没有你，你无法做到。你不想表现他（用户体验），他并没有告诉你他很难等待它。一些小伙伴已经感到困惑，你还在等什么，拿起电话并拨打帮助热线。啊，它很遥远。

实际上，解析的方法很简单，答案是setTimeout（）函数。让我们再次更改代码：

Page（{data: {show: false，//用于显示或隐藏屏蔽控件runAM: false //用于动画执行}，chanMask: function（）{var isShow=this.data.show？false: true ; //如果隐藏显示，隐藏的显示var delay=isShow？30: 1000; //第一次是博客所有者显示控件显示所需的时间，第二次是动画所需的时间（isShow）{this.setData（{show: isShow}）;} else {this.setData（{runAM: isShow}）} setTimeout（function（）{if（isShow）{this.setData（{runAM: isShow}） ; Else {this.setData（{show: isShow}）;}}，delay）;}}）慢慢指向我的X

在上面的代码中，我们向动画开始执行凭证时使用的数据添加了一个新的变量runAM，然后在chanMask函数中定义了一个用于设置延迟的可变延迟代码，可能有点粗略解释了博客。一点点

该程序的整个过程基于isShow变量，

当isShow为true时，也就是说我们必须打开掩码控件，所以我们首先显示掩码控件，然后为控件添加一个样式类名称，以便在延迟30毫秒后进行动画处理

当isShow为false时，我们首先删除动画控件的类名（删除后，动画将返回原始形式），然后让掩码在延迟1000毫秒后隐藏（动画所需的时间）

关于延迟的第一个值的设置，博主自己测量了它。如果小伙伴仍然担心没有显示控件，则可以将其设置为50毫秒或100毫秒。 0.1秒的时差对用户体验没有影响。不大，如果你设置了1秒的响应，我只能说改变手机

最后，您会发现在整个过程中，博主只调用一个显示或隐藏的函数，并且不处理关闭的新函数。这种写作充满了木材。

该方法也适用于H5

＆lt; 汇海（www.hvihi.com）是国内知名的商城系统和商城网站建设提供商，其中汇海技术小程序系统提供小程序商城开发，小程序配送系统，微分配系统，商城系统，电子商务网站建设， 微信发行系统，小程序商城及其他多端商场和电子商务行业解决方案＆gt;

确认：这个文件和图像源网络编辑器的网站部分，如果有侵权及时通信删除。 汇海hvihi.com网站原创文章，请注明出处。