@wines/animation-group v1.5.1

@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

AnimationGroup slot

AnimationGroup externalClasses