jq中如何实现slideUp或slideDown的动画效果？ 我的想法是利用css3的translate:translateY()属性为需要动画的元素添加一个动画类。
首先我们看一下治疗效果图：
1、掩蔽层的结构：
//mengShow是蒙层是否显示的标志，然后蒙层绑定outbtn的点击事件
//这里的三元运算符是判断动画该执行哪一种，catchtap这个是阻止冒泡的点击事件，这个事件必须有，才能阻止冒泡
已选商品（1）
清空购物车
{{item.Cname}}
￥{{item.Cprice}}
-
{{item.Cnum}}
+
注意：三元运算符中的slideup和slidedown必须加冒号。
2、自己编写遮罩层的其他样式。 最重要的是slideup和slidedown的动画效果样式：
@keyframes slidedown {
from {
transform: translateY(0);
}
to {
transform: translateY(100%);
}
}
.slidedown {
animation: slidedown 0.5s linear ;
}
.slideup {
animation: slideup 0.5s linear ;
}
@keyframes slideup {
from {
transform: translateY(100%);
}
to {
transform: translateY(0);
}
}
其他样式：list-fix是固定定位，而in-list是绝对定位。
需要注意的一点是：在做的时候，移动是从Y轴的100%位置开始的，也就是顶部，或者说从0到100%，所以需要设置z-index，这样就可以在顶部向上移动或者返回到100%css3 蒙层，即顶部时，遮罩层浮在“确认订单”的整个结构下方。 也就是说，“确认订单”的整个结构的z索引小于掩模层的z索引。
3.js
page({
data: {
mengShow:false,//蒙层的显示与否
aniStyle:true, //动画效果，默认slideup
},
//蒙层的显示
showMeng:function(e){ //这是“确认下单”这整个购物车导航栏的点击事件
this.setData({
mengShow:true, //蒙层显示
aniStyle:true //设置动画效果为slideup
})
},
outbtn:function(e){ //这是list-fix的点击事件，给它绑定事件，是为了实现点击其它地方隐藏蒙层的效果
var that=this;
this.setData({
aniStyle:false //设置动画效果为slidedown
})
setTimeout(function(){ //延时设置蒙层的隐藏，这个定时器的时间，就是slidedown在css动画里设置的时间，这样就能实现slidedown动画完成后，蒙层才消失的效果。不设置定时器会导致动画效果看不见
that.setData({
mengShow: false
})
},500)
},
inbtn:function(e){ //这个事件必须有，就算不做什么事情也要写上去，因为这个事件是为了防止事件冒泡，导致点击in-list这里面的元素时，点击事件冒泡到list-fix触发它的slidedown事件。
console.log("in")
},
})
这样可以实现向下滑动和向上滑动，以及点击其他地方隐藏某个元素的功能。
总结：
1.避免冒泡点击风暴：catchtap=""
2、如何通过点击子元素以外的地方来隐藏父元素：父元素绑定点击隐藏风暴，然后子元素绑定catchtap。 这些可以阻止冒泡的风暴。
3、巧妙地利用定时器设置属性值css3 蒙层，可以实现类似先执行一个动画再执行另一个动画的方法。
以上就是本文的全部内容。 希望对你的学习有所帮助，也希望你多多支持我。
