自定义组件绑定wx：if无法实现动画效果
发布于 6 年前 作者 minzhong 17652 次浏览 来自 问答

自定义组件模板

<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: {
        ../
    }
})

回到顶部