利用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: 300 rpx ;

left: 0 ;

bottom: -300 rpx ;

background-color: white ;

text-align: center ;

line-height: 300 rpx ;

box-shadow: 0 1px 10px #aaa ;

}

显示后

.mask-con-show {

bottom: 0 ;

}