@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 | 根节点样式类 |