-
需求:点击按钮,信息展示或者信息输入。如何在当前页面弹出新的面板?
(1)方式一:直接弹出一个面板。 (2)方式二:添加动画效果,从界面的一侧如底部弹出。
-
如何实现
(1)弹出内容面板样式:如何显示与关闭,有两种方式wx:if和hidden (2)遮罩层,区分弹出内容与原有内容:z-index控制遮罩层、弹出层和原来信息层。 (3)动画特效,例如底部弹出:
-
动画特效原理
本质上是动态修改transform属性值达到动态效果。 底部平移采用translateY,即transform:translate(百分比);
-
举个例子
index.wxml<!-- hidden属性控制是否显示--> <view class="modals" hidden="{ {hideModal}}"> <!-- 遮罩层--> <view class="modals-cancel" bindtap="hideModal"></view> <view class="bottom-dialog-body bottom-pos" animation="{ {animationData}}"></view> </view> <button bindtap="showModal">点开</button>
index.wxss
/*基层,top,left,right,bottom为0表示填充整个页面*/ .modals{ position:fixed; z-index: 999; top:0; left: 0; right:0; bottom: 0; } /*遮罩层,层级高于modals层*/ .modals-cancel{ position:absolute; z-index:1000; top:0; left: 0; right:0; bottom: 0; background-color: rgba(0,0,0,.5); } /*弹出层,层级高于遮罩层*/ .bottom-dialog-body{ position:absolute; z-index:10001; bottom:0; left:0; right:0; padding:30rpx; height:300rpx; background-color: #fff; } /*弹出层动画前初始位置,Transform属性应用于元素的2D或3D转换。 这个属性允许你将元素旋转,缩放,移动,倾斜等。translateY(100%)即基于当前位置向下平移100%元素高度*/ .bottom-pos{ -webkit-transform:translateY(100%); transform:translateY(100%); }
index.js
Page({ data:{ hideModal:true, animationData:{ }, }, //显示遮罩层,并从底部逐渐弹出内容,即 showModal: function () { var that=this; that.setData({ hideModal:false }) //创建一个动画实例 animation var animation = wx.createAnimation({ duration: 600,//动画的持续时间 默认400ms timingFunction: 'ease',//动画的效果 默认值是linear }) this.animation = animation setTimeout(function(){ that.fadeIn();//调用显示动画 },200) }, // 隐藏遮罩层 hideModal: function () { var that=this; var animation = wx.createAnimation({ duration: 800,//动画的持续时间 默认400ms 数值越大,动画越慢 数值越小,动画越快 timingFunction: 'ease',//动画的效果 默认值是linear }) this.animation = animation that.fadeDown();//调用隐藏动画 setTimeout(function(){ that.setData({ hideModal:true }) },720)//先执行下滑动画,再隐藏模块 }, //向上平移动画 fadeIn:function(){ //translateY对 Y 轴平移,step()表示一组动画完成。可以在一组动画中调用任意多个动画方法,一组动画中的所有动画会同时开始,一组动画完成后才会进行下一组动画。 this.animation.translateY(0).step() this.setData({ //动画实例的export方法导出动画数据传递给组件的animation属性 animationData: this.animation.export() }) }, //向上平移动画 fadeDown:function(){ this.animation.translateY(300).step() this.setData({ //导出动画队列。export 方法每次调用后会清掉之前的动画操作。 animationData: this.animation.export(), }) }, })
备注:
- css的animation属性
- 演示
参考:https://www.jianshu.com/p/cea2d4dc24d1