我爱小程序
| 问题模块 |
|---|
| API和组件 |
自定义组件模板
<view class="x-modal" wx:if="visable"> <view class="x-modal-mock" animation="{{mockAnimateData}}"></view> <view class="x-modal-container flex flex-align-center " animation="{{containerAnimateData}}"> <view class="x-modal-window"> <view class="x-modal-header"> <slot name="header"></slot> </view> <view class="x-modal-content"> <slot name="content"></slot> </view> <view class="x-modal-footer flex"> <view class='flex1 btn' bindtap="cancel">取消</view> <view class='flex1 btn' bindtap="success">确定</view> </view> </view> </view></view> |
然后每次visable改变时，想写动画但是都无法实现。
因为
observer是改变后才执行的。
有什么办法是让visable时执行的函数？
或者封装wx:if动画？
Component({ options: { multipleSlots: true // 在组件定义时的选项中启用多slot支持 }, properties: { title: { type: String, }, visable: { type: Boolean, value: false, observer: function (newVal, oldVal) { var timer=1000; if(newVal){ var mockAnimation = wx.createAnimation({ duration: timer, timingFunction: 'ease', }); var containerAnimateData = wx.createAnimation({ duration: timer, timingFunction: 'ease', }); this.mockAnimateData = mockAnimation; mockAnimation.opacity(1).step(); containerAnimateData.top(0).step(); this.setData({ mockAnimateData: mockAnimation.export(), containerAnimateData: containerAnimateData }) }else{ var mockAnimation = wx.createAnimation({ duration: timer, timingFunction: 'ease', }); var containerAnimateData = wx.createAnimation({ duration: timer, timingFunction: 'ease', }); this.mockAnimateData = mockAnimation; mockAnimation.opacity(0).step(); containerAnimateData.top("-100%").step(); this.setData({ mockAnimateData: mockAnimation.export(), containerAnimateData: containerAnimateData.export() }) } } }, }, data: { }, methods: { ../ }}) |