@wines/animation-group

AnimationGroup 动画组

将自定义的组件包裹在 animation-group 组件内，可以实现过渡/动画效果，预设 9 种过渡效果 fadeIn, fadeInDown, fadeInLeft, fadeInRight, fadeInUp, slideInUp, slideInDown, slideInLeft, slideInRight, zoom, punch 可选用。

在进入/离开的过渡中，会有 6 个 class 切换：

• -enter: 进入过渡的开始状态，在过渡过程完成之后移除
• -enter-active: 进入过渡的结束状态，在过渡过程完成之后移除
• -enter-done: 进入过渡的完成状态
• -exit: 离开过渡的开始状态，在过渡过程完成之后移除
• -exit-active: 离开过渡的结束状态，在过渡过程完成之后移除
• -exit-done: 离开过渡的完成状态

使用指南

在 page.json 中引入组件

{
  "navigationBarTitleText": "wux-animation-group",
  "usingComponents": {
    "wux-animation-group": "@wines/animation-group"
  }
}

示例

<view class="page">
    <view class="page__hd">
        <view class="page__title">AnimationGroup</view>
        <view class="page__desc">动画组</view>
    </view>
    <view class="page__bd">
        <wux-cell-group>
            <block wx:for="{{ animations }}" wx:key="index">
                <wux-cell
                 title="{{ item }}"
                 isLink
                 data-index="{{ index }}"
                 bind:click="onClick"
                />
            </block>
        </wux-cell-group>
        <wux-animation-group
         wux-class="example"
         in="{{ example.in }}"
         enter="{{ example.enter }}"
         exit="{{ example.exit }}"
         class-names="{{ example.classNames }}"
         bind:enter="onEnter"
         bind:entering="onEntering"
         bind:entered="onEntered"
         bind:exit="onExit"
         bind:exiting="onExiting"
         bind:exited="onExited"
         bind:change="onChange"
        >{{ example.animation }}
        </wux-animation-group>
    </view>
</view>

Page({
  data: {
    animations: [
      'fadeIn',
      'fadeInDown',
      'fadeInLeft',
      'fadeInRight',
      'fadeInUp',
      'slideInUp',
      'slideInDown',
      'slideInLeft',
      'slideInRight',
      'zoom',
      'punch',
      'custom',
    ],
    example: {
      animation: 'fadeIn',
      classNames: 'wux-animate--fadeIn',
      enter: true,
      exit: true,
      in: false,
    },
  },
  onClick(e) {
    const { index } = e.currentTarget.dataset;
    const animation = this.data.animations[index];
    const classNames = `wux-animate--${animation}`;

    this.setData({
      'example.in': true,
      'example.classNames': classNames,
      'example.animation': animation,
    });
  },
  onEnter(e) {
    console.log('onEnter', e.detail);
  },
  onEntering(e) {
    console.log('onEntering', e.detail);
  },
  onEntered(e) {
    console.log('onEntered', e.detail);

    // delay 300ms close animation
    setTimeout(() => this.setData({ 'example.in': false }), 300);
  },
  onExit() {
    console.log('onExit');
  },
  onExiting() {
    console.log('onExiting');
  },
  onExited() {
    console.log('onExited');
  },
  onChange(e) {
    console.log('onChange', e.detail);
  },
});

API

AnimationGroup props

参数	类型	描述	默认值
in	boolean	触发组件进入或离开过渡的状态	false
classNames	string	过渡的类名 wux-animate--${fadeIn}	-
duration	number、{enter:number; exit:number}	过渡持续时间	-
type	string	过渡动效的类型 animation、transition	transition
appear	boolean	首次挂载时是否触发进入过渡	false
enter	boolean	是否启用进入过渡	true
exit	boolean	是否启用离开过渡	true
mountOnEnter	boolean	首次进入过渡时是否懒挂载组件	true
unmountOnExit	boolean	离开过渡完成时是否卸载组件	true
wrapStyle	string,object	自定义样式	-
disableScroll	boolean	阻止移动触摸	false
bind:click	function	点击组件时触发的回调函数	-
bind:enter	function	进入过渡的开始状态时触发的回调函数	-
bind:entering	function	进入过渡的结束状态时触发的回调函数	-
bind:entered	function	进入过渡的完成状态时触发的回调函数	-
bind:exit	function	离开过渡的开始状态时触发的回调函数	-
bind:exiting	function	离开过渡的结束状态时触发的回调函数	-
bind:exited	function	离开过渡的完成状态时触发的回调函数	-
bind:change	function	监听状态变化的回调函数	-

AnimationGroup slot

名称	描述
-	自定义内容

AnimationGroup externalClasses

名称	描述
wux-class	根节点样式类