pp电子

登录
免费开通
产品中心
更多服务

使用css transition属性实现一个发动画显隐的微信小程序部件

—— 2020 ——
09/27
00:00

泉源：

作者：未知

阅读：0

栏目：小程序开发

2020/9/27 0:00:00 泉源：不详 作者：未知

使用css transition属性实现一个发动画显隐的微信小程序部件

像这样的一个带过渡效果的小部件在我们现实开发中的应用几率照旧较量大的，，，可是在开发微信小程序的历程中可能有的小同伴发明transition这个属性它欠好使（下面说明）以是我们这个时间会思量去使用微信官方提供的wx.createAnimation API来建设动画。。。。 。

接下来我带列位小同伴怎样让 transition 属性在这种需求中好使起来，，，下面上代码

 

page({
    data: {
        show:false//用于显示或隐藏控件
    },
    chanMask:function(){
 var isShow = this.data.show ? false : true;//若是显示就隐藏，，，隐藏就显示
 this.setData({
            show:isShow
        })
    }
})

 

/*index.wxss*/
/*显示前*/
.mask-con{
transition: 1s; 
position: fixed;
width: 100%;
height: 300rpx;
left: 0;
bottom: -300rpx;
 
text-align: center;
line-height: 300rpx;
box-shadow: 0 1px 10px #aaa;
}
/*显示后*/
.mask-con-show{
bottom: 0;
}

 

<!--index.wxml-->
<view class="container">
<button bindtap="chanMask">点我</button>
<view class="mask-con {{show ? 'mask-con-show' : ''}}">
<view class="close" bindtap="chanMask">X</view>
逐步飞起
</view>
</view>

 

在以上代码中我们首先在data中界说了一个show变量用于mask-con控件的显示状态，，，在chanMask函数中交替的改变这个变量，，，然后将chanMask函数绑定给button和close控件的点击事务上，，，最后我们凭证show来决议是否给mask-con（pp电子动画控件）添加一个class： mask-con-show那么到这里我们已经实现了一个带过渡的显隐小部件

现在许多的APP或小程序都是以这种方式来close弹窗控件，，，谁人X用户点的不过瘾，，，看到这里智慧的小同伴可能会想到再另外添加一个阴影控件在mask-con的下层并绑定上pp电子chanMask函数，，，这样的话阴影控件和pp电子mask-con就可能不是在一个整体上了，，，不敷直观，，，又好比说向导要让这个阴影它有一个显示颜色逐步加深，，，隐藏逐步减淡的效果，，，为了应对这种情形，，，我们把代码调解如下：

page({

    data: {
        show:false//用于显示或隐藏mask控件
    },
    chanMask:function(){
 var isShow = this.data.show ? false : true;//若是显示就隐藏，，，隐藏就显示
 this.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;
 
transition: 1s;
text-align: center;
line-height: 300rpx;
box-shadow: 0 1px 10px #aaa;
}
.mask-con-show{
bottom: 0;
}

 

<!--index.wxml-->
<view class="container">
<button bindtap="chanMask">点我</button>
<view class="mask {{show ? 'show' : 'hide'}}">
<view class="mask-shadow {{show ? 'mask-shadow-on' : ''}}"></view>
<view class="mask-con {{show ? 'mask-con-show' : ''}}">
<view class="close" bindtap="chanMask">X</view>
逐步飞起
</view>
</view>
</view>

 

在这里我们设置了两个样式类名mask-shadow-on和mask-con-show来界说阴影以及主要控件mask-con动画后的效果（详细代码凭证自己的需求决议），，，看起来一切都OK，，，没有任何问题，，，那么先运行一波，，，艾玛，，，神马情形？？？阴影和pp电子mask-con直接怼了出来毫无过渡效果，，，那这是何原因影响我们程序的效果呢，，，经由一番考量博主发明在display为none的情形之下pp电子transition属性可能会失效，，，那到这里有的小同伴可能会问 “博主，，，谁人差池啊，，，我们显着已经将mask的display设置成block怎么尚有这种问题呢”

是这样的，，，pp电子mask控件它显示需要那么一点时间才华完全显示出来，，，可是呢pp电子变量show设置成true之后，，，pp电子阴影控件和主要控件也会马上添加上了动画后样式类名，，，这个时间它比mask显示所需的时间要快，，，以是pp电子机械它以为mask照旧处于display为none的情形

打个例如说：mask是这一整块的老大，，，这个老大都还没演出完事，，，你们这些做小弟就已经出来抢风头了，，，你让当老大的体面往哪放，，，不可我得把你们这些抢我风头的都给干掉，，，看你们还得瑟。。。。 。这个老大的人狠话未几，，，你抢了他风头不可，，，你想不演出他（用户体验）也不兴奋，，，并且他演出完了还不跟你说，，，那这个老大这么难伺候该怎么办呢？？？有的小同伴已经感受到渺茫了吗，，，那还在等什么，，，赶忙拿起你手中的电话拨打求助热线。。。。 。。。。。 。。。。。 。。。。。 。。。。。 。啊呸，，，扯远了

着实决解的要领很简朴，，，没错谜底就是 setTimeout()函数，，，来，，，我们把代码再改一遍：

page({
        data: {
        show:false,//用于显示或隐藏mask控件
        runAM:false//用于动画执行的凭证
    },
    chanMask:function(){
 var isShow = this.data.show ? false : true;//若是显示就隐藏，，，隐藏就显示
 var delay  = isShow ? 30 : 1000;//第一个时间是博主测出来控件显示所需的时间，，，第二个是动画所需的时间
 if(isShow){
 this.setData({
                show:isShow
            });
        }else{
 this.setData({
                runAM:isShow
            })
        }
 
        setTimeout(function(){
 if(isShow){
 this.setData({
                    runAM:isShow
                });
            }else{
 this.setData({
                    show:isShow
                });
            }
        }, delay);

    }
})

 

<!--index.wxml-->
<view class="container">
<button bindtap="chanMask">点我</button>
<view class="mask {{show ? 'show' : 'hide'}}" bindtap="chanMask">
<view class="mask-shadow {{runAM ? 'mask-shadow-on' : ''}}"></view>
<view class="mask-con {{runAM ? 'mask-con-show' : ''}}">
<view class="close" bindtap="chanMask">X</view>
逐步飞起
</view>
</view>
</view>

 

在以上代码中，，，我们给data新添加了一个变量runAM用于动画何时最先执行的凭证，，，再在chanMask函数界说了一个用于设置延时的变量delay 代码可能有点绕博主在此粗暴的诠释一下

程序的整个历程都是凭证isShow这个变量来走的，，，

当isShow为true时也就是说我们要翻开mask控件了，，，以是我们先把mask控件显示出来，，，然后在延时30毫秒后去为要执行动画的控件添加上样式类名

当isShow为false时我们先把动画控件的类名去掉（去掉后会执行动画回到原本的形态），，，然后在延时1000毫秒（动画所需的时间）后让mask隐藏

关于delay的第一个值的设准时博主自己测出来的，，，若是列位小同伴还担心控件没显示的话可以设成50毫秒或100毫秒都无所这0.1秒的时间差对用户体验的影响并不大，，，如过你设了1秒都没反映，，，我只能说换手机吧

最后你会发明在整个历程中博主都只挪用一个函数举行显示或隐藏，，，并没有为关闭新建函数处理，，，这种写法逼格满满有木有

此要领同样适用于H5

使用css transition属性实现一个发动画显隐的微信小程序部件


【本站声明】
  1、本站文章中所选用的图片及文字泉源于网络以及用户投稿，，，由于未联系到知识产权人或未发明有关知识产权的挂号，，，若有知识产权人并不肯意我们使用，，，若是有侵权请连忙联系。。。。 。
  2、本网站差池文章中所涉及的内容真实性、准确性、可靠性认真，，，仅系客观性形貌，，，如您需要相识该类商品/服务详细的资讯，，，请您直接与该类商品/服务的提供者联系。。。。 。


KESION pp电子软件

KESION pp电子软件是海内领先的在线教育软件及私域社交电商软件服务提供商，，，恒久专注于为企业提供在线教育软件及社交电商SaaS平台解决方案。。。。 。
公司焦点产品云开店SaaS社交电商服务平台、在线教育SaaS服务平台、教育企业数字化SaaS云平台、企微营销助手、私有化自力安排品牌网校和在线教育咨询等。。。。 。

KESION 一直通过手艺立异，，，提供产品和服务，，，助力企业向数字化转型，，，通过科技驱动商业刷新，，，让商业变得更智慧！



▼点击进入pp电子官网相识更多



热门标签
微信小程序 SaaS
上/下篇
换一换相关推荐
精选内容
热门精选
pp电子·模拟器(试玩游戏)官方网站 pp电子·模拟器(试玩游戏)官方网站 pp电子·模拟器(试玩游戏)官方网站
【网站地图】
使用css transition属性实现一个发动画显隐的微信