<view class="page">
    <view class="page__hd">
        <view class="page__title">AnimationGroup</view>
        <view class="page__desc">动画组</view>
    </view>
    <view class="page__bd">
        <view class="weui-cells weui-cells_after-title">
            <view class="weui-cell weui-cell_select">
                <view class="weui-cell__hd weui-cell__hd_in-select-after">
                    <view class="weui-label" style="width: auto;">Switch classNames</view>
                </view>
                <view class="weui-cell__bd">
                    <picker bindchange="pickerChange" value="{{ index }}" range="{{ items }}">
                        <view class="weui-select weui-select_in-select-after" style="padding-left: 30px;">{{ items[index] }}</view>
                    </picker>
                </view>
            </view>
            <view class="weui-cell weui-cell_switch">
                <view class="weui-cell__bd">Enable or disable enter transitions</view>
                <view class="weui-cell__ft">
                    <switch data-model="example.enter" bindchange="switchChange" checked="{{ example.enter }}" />
                </view>
            </view>
            <view class="weui-cell weui-cell_switch">
                <view class="weui-cell__bd">Enable or disable exit transitions</view>
                <view class="weui-cell__ft">
                    <switch data-model="example.exit" bindchange="switchChange" checked="{{ example.exit }}" />
                </view>
            </view>
            <view class="weui-cell weui-cell_switch">
                <view class="weui-cell__bd">Switch state</view>
                <view class="weui-cell__ft">
                    <switch data-model="example.in" bindchange="switchChange" checked="{{ example.in }}" />
                </view>
            </view>
            <view class="weui-cell weui-cell_switch">
                <view class="weui-cell__bd">Toggle</view>
                <view class="weui-cell__ft">
                    <switch bindchange="onToggle" checked="{{ show }}" />
                </view>
            </view>
        </view>
        <wux-animation-group wux-class="example" in="{{ example.in }}" enter="{{ example.enter }}" exit="{{ example.exit }}" class-names="{{ example.classNames }}" bind:click="onClick" bind:enter="onEnter" bind:entering="onEntering" bind:entered="onEntered" bind:exit="onExit"
            bind:exiting="onExiting" bind:exited="onExited">
            <view class="weui-article">
                <view class="weui-article__p">
                    微信小程序自定义组件 https://github.com/wux-weapp/wux-weapp
                </view>
            </view>
        </wux-animation-group>
        <wux-animation-group wux-class="example" in="{{ show }}" duration="{{ 1000 }}" unmountOnExit="{{ false }}" bind:change="onChange">
            <view class="weui-article">
                <view class="weui-article__p">{{ status }}</view>
            </view>
        </wux-animation-group>
    </view>
</view>
