coloruicss/pages/animation/animation.wxml

<view class="bar solid-bottom">
  <view class='ml-sm'>
    <text class='iconfont icon-titles success-text'></text>
    <text class='text-lg ml-xs'>默认效果</text>
  </view>
</view>
<view class="doc-main">
  <view class='flex flex-wrap justify-around'>
    <button class='{{item.color}} btn animation-{{animation==item.name? item.name :""}} m-sm basis-sm' bindtap='toggle' data-class='{{item.name}}' wx:for="{{list}}">{{item.name}}</button>
  </view>
</view>

<view class="bar solid-bottom mt-sm">
  <view class='ml-sm'>
    <text class='iconfont icon-titles success-text'></text>
    <text class='text-lg ml-xs'>反向动画</text>
  </view>
</view>
<view class="doc-main">
  <view class='flex flex-wrap justify-around'>
    <button class='{{item.color}} btn animation-{{animation==item.name+"s"? item.name :""}} animation-reverse m-sm basis-sm' bindtap='toggle' data-class='{{item.name+"s"}}' wx:for="{{list}}">{{item.name}}</button>
  </view>
</view>

<view class="bar solid-bottom mt-sm">
  <view class='ml-sm'>
    <text class='iconfont icon-titles success-text'></text>
    <text class='text-lg ml-xs'>延迟执行</text>
  </view>
</view>
<view class="doc-main">
  <view class='flex justify-around m-sm'>
    <button class='btn secondary' bindtap='toggleDelay'>开始执行</button>
  </view>
  <view class='flex flex-wrap justify-around'>
    <button class='{{item.color}} btn {{toggleDelay?"animation-slide-bottom":""}} m-sm basis-sm' style='animation-delay: {{(index+1)*0.1}}s;' wx:for="{{list}}">0.{{index+1}}s</button>
  </view>
</view>