<view><view bindtap="openPopup">点击</view><view hidden="{{popup}}"><view class="huise" bindtap="splicPopup"></view><view class="popup fadein" animation="{{animationData}}"></view></view>
</view>

.huise {width: 100%;height: 100%;background: #000;position: fixed;top: 0;opacity: 0.70;z-index: 49;
}.popup {position: fixed;right: 0;width: 70%;background: #fff;height: 100%;top: 0;z-index: 50;
}
.fadein {animation: fadein 0.5s;
}@keyframes fadein {0% {transform: translate(100%, 0);}100% {transform: none;}
}

  data: {popup: true,animationData: {},},fadeIn() {this.animation.translateX(0).step()this.setData({animationData: this.animation.export() //动画实例的export方法导出动画数据传递给组件的animation属性})},fadeDown() {this.animation.translateX(600).step()this.setData({animationData: this.animation.export(),})},// 关闭弹窗splicPopup() {var that = this;var animation = wx.createAnimation({duration: 800, //动画的持续时间 默认400ms   数值越大，动画越慢   数值越小，动画越快timingFunction: 'ease', //动画的效果 默认值是linear})this.animation = animationthat.fadeDown(); //调用隐藏动画   setTimeout(function() {that.setData({popup: true})}, 220) //先执行下滑动画，再隐藏模块},// 点击打开弹窗标签openPopup() {let that = thisthis.setData({popup: false})var animation = wx.createAnimation({duration: 600, //动画的持续时间 默认400ms   数值越大，动画越慢   数值越小，动画越快timingFunction: 'ease', //动画的效果 默认值是linear})this.animation = animationsetTimeout(function() {that.fadeIn(); //调用显示动画}, 200)},