使用css3的transition属性来实现购物车列表从底部滑入的动画效果
一、效果图
二、wxml
新建2个组件，一个是购物车goods.wxml。另一个是购物车列表弹出层cart.wxml，我们要实现的效果是点击goods.wxml组件里的“购物车”按钮，然后从底部滑入一个购物车列表弹出层（cart.wxml）。
在这里，我们使用include方法引入cart组件，用temp引入组件的方式也行。两者区别请自行百度，这里不做描述了。
<!-- goods.wxml -->
<view class='cart'>
<button type='button' bindtap='btnCart'>购物车</button>
</view>
<include src="/pages/cart/cart.wxml"/>
<!-- cart.wxml -->
<view class='cart-list {{status == true ? "an" : ""}}'></view>
<view class='mask' wx:if="{{mask}}" bindtap='close'></view>
三、wxss
这里注意，goods.wxss需要用@import的方法引入cart.wxss，否则无法渲染对应的样式效果。
/* pages/goods/goods.wxss */
page{
background: #f8f8f8;
}
.cart{
position: fixed;
bottom: 0;
width: 100%;
}
button{
border-radius: 0;
background: #fd5f00;
color: #fff;
}
@import "/pages/cart/cart.wxss";
/* pages/cart/cart.wxss */
.mask{
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,.7);
z-index: -1;
transition: all .2s cubic-bezier(.25,.5,.5,.9);
-webkit-transition: all .2s cubic-bezier(.25,.5,.5,.9);
}
.cart-list{
width: 100%;
height: 400rpx;
background: #fff;
position: fixed;
bottom: 0;
transform: translateY(400rpx);
-webkit-transform: translateY(400rpx);
transition: all .2s cubic-bezier(.25,.5,.5,.9);
-webkit-transition: all .2s cubic-bezier(.25,.5,.5,.9);
}
.an{
transform: translateY(0);
-webkit-transform: translateY(0);
}
四、js
首先，需要在“购物车”按钮绑定一个tap事件bindtap='btnCart'，点击时显示半透明黑色遮罩层，这里通过true和false来实现。
<!-- goods.wxml -->
<button type='button' bindtap='btnCart'>购物车</button>
在data里定义变量mask，用来表示遮罩层，默认隐藏即false。
data: {
mask: false
}
点击显示遮罩层，即把mask的值设置成true。然后用wx:if渲染。
btnCart: function () {
this.setData({
mask: true
})
}
<!-- cart.wxml -->
<view class='mask' wx:if="{{mask}}" bindtap='close'></view>
然后点击遮罩层实现隐藏自身效果，在view标签上增加tap事件bindtap='close'，把mask值设置成false即可。
close: function () {
this.setData({
mask: false
})
}
接下来实现底部购物车列表滑入效果，注意这里不能用wx:if这个属性（display: none），否则transition属性过渡效果会无效。
我们可以通过增加class和移除class这个小技巧来实现效果，如点击“购物车”按钮时给底部购物车列表弹出层增加一个class="an"，点击遮罩层移除这个class。这里需要在data定义一个变量status，用来表示这个class="an"的开关状态，默认为false。
data: {
mask: false,
status: false
}
点击“购物车”按钮时，把status设置为true。
btnCart: function () {
this.setData({
mask: true,
status: true
})
}
再通过三元运算符来实现class的切换（status为true时class为="an" 否则class=""）。
<!-- cart.wxml -->
<view class='cart-list {{status == true ? "an" : ""}}'></view>
同理点击遮罩层时，把class="an"移除，即把status设置为false。
close: function () {
this.setData({
mask: false,
status: false
})
}
以下代码是实现弹入效果的样式。
.cart-list{
width: 100%;
height: 400rpx;
background: #fff;
position: fixed;
bottom: 0;
transform: translateY(400rpx);
-webkit-transform: translateY(400rpx);
transition: all .2s cubic-bezier(.25,.5,.5,.9);
-webkit-transition: all .2s cubic-bezier(.25,.5,.5,.9);
}
.an{
transform: translateY(0);
-webkit-transform: translateY(0);
}
