应用css transition特性完成1个带动漫显隐的手机微

2021-03-17 15:41 jianzhan

大家先看来实际效果图

像这样的1个带过渡实际效果的小构件在大家具体开发设计中的运用概率還是较为大的,可是在开发设计手机微信小程序流程的全过程中将会有的小伙子伴发现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: ⑶00rpx;
 
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中界定了1个show自变量用于mask-con控制的显示信息情况,在chanMask涵数中更替的更改这个自变量,随后将chanMask涵数关联给button和close控制的点一下恶性事件上,最终大家依据show来决策是不是给mask-con(大家的动漫控制)加上1个class: mask-con-show那末到这里大家早已完成了1个带过渡的显隐小构件,可是针对一些要求这還是太凑合了,例如下图的状况:

如今许多的APP或小程序流程全是以这类方法来close弹窗控制,那个X客户点的但是瘾,看到这里聪慧的小伙子伴将会会想起再此外加上1个黑影控制在mask-con的下层并关联上大家的chanMask涵数,这样的话黑影控制和大家的mask-con便可能并不是在1个总体到了,不足直观,又例如说领导要让这个黑影它有1个显示信息色调渐渐地加深,掩藏渐渐地减淡的实际效果,以便解决这类状况,大家把编码调剂以下:

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: ⑶00rpx;
 
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动漫后的实际效果(实际编码依据自身的要求决策),看起来1切都OK,沒有任何难题,那末先运作1波,艾玛,神马状况?黑影和大家的mask-con立即怼了出来没什么过渡实际效果,那这是何缘故危害大家程序流程的实际效果呢,历经1番考虑博主发如今display为none的状况之下大家的transition特性将会会无效,那到这里有的小伙子伴将会会问 “博主,那个不对啊,大家明明早已将mask的display设定成block如何也有这类难题呢”

是这样的,大家的mask控制它显示信息必须那末1点時间才可以彻底显示信息出来,可是呢大家的自变量show设定成true以后,大家的黑影控制和关键控制也会立刻加上到了动漫后款式类名,这个時间它比mask显示信息所需的時间要快,因此大家的设备它觉得mask還是处在display为none的状况

打个比如说:mask是这1整块的大哥,这个大哥还没有演出完事,你们这些做小弟就早已出来抢风头了,你让当大哥的情面往哪放,不好我得把你们这些抢我风头的都给干掉,看你们还得瑟。这个大哥的人狠话很少,你抢了他风头不好,你想不演出他(客户体验)也不开心,并且他演出完了还不跟你说,那这个大哥这么难服侍应该怎么办呢?有的小伙子伴早已觉得到迷茫了吗,那还在等甚么,赶紧拿起你手中的电話拨打求助热线。。。。。啊呸,扯远了

实际上决解的方式很简易,没错回答便是 setTimeout()涵数,来,大家把编码再改1遍:

page({
        data: {
        show:false,//用于显示信息或掩藏mask控制
        runAM:false//用于动漫实行的依据
    },
    chanMask:function(){
        var isShow = this.data.show ? false : true;//假如显示信息就掩藏,掩藏就显示信息
        var delay  = isShow ? 30 : 1000;//第1个時间是博主测出来控制显示信息所需的時间,第2个是动漫所需的時间
        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新加上了1个自变量runAM用于动漫什么时候刚开始实行的凭据,再在chanMask涵数界定了1个用于设定延时的自变量delay 编码将会有点绕博主在此粗鲁的解释1下

程序流程的全部全过程全是依据isShow这个自变量来走的,

当isShow为true时也便是说大家要开启mask控制了,因此大家先把mask控制显示信息出来,随后在延时30毫秒后去为要实行动漫的控制加上上款式类名

当isShow为false时大家先把动漫控制的类名去掉(去掉后会实行动漫返回本来的形状),随后在延时1000毫秒(动漫所需的時间)后让mask掩藏

有关delay的第1个值的设置时博主自身测出来的,假如各位小伙子伴还担忧控制没显示信息的话能够设成50毫秒或100毫秒都没有这0.1秒的時间差对客户体验的危害其实不大,如过你设了1秒都没反映,我只能说换手机上吧

最终你会发如今全部全过程中博主都只启用1个涵数开展显示信息或掩藏,并沒有为关掉新建涵数解决,这类写法逼格满满有没有

此方式一样可用于H5

新人第1次写blog有点唠叨了,望见谅

GitHub联接 https://github.com/1441327053/frontEnd-WXapp/tree/master/widget-transition

总结

以上所述是网编给大伙儿详细介绍的应用css transition特性完成1个带动漫显隐的手机微信小程序流程构件,期待对大伙儿有一定的协助,假如大伙儿有任何疑惑请给我留言,网编会立即回应大伙儿的。在此也十分谢谢大伙儿对脚本制作之家网站的适用!