@antmjs/vantui/es/transition/demo/demo1.js

一套适用于Taro3及React的vantui组件库

import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
/* eslint-disable */
import react, { useEffect } from 'react';
import { View } from '@tarojs/components';
import { Cell, Transition } from '@antmjs/vantui';
import { jsx as _jsx } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
var animations = ['fade', 'fade-up', 'fade-down', 'fade-left', 'fade-right', 'slide-up', 'slide-down', 'slide-left', 'slide-right'];
export default function Demo() {
  var _react$useState = react.useState('fade-right'),
    _react$useState2 = _slicedToArray(_react$useState, 2),
    show = _react$useState2[0],
    setShow = _react$useState2[1];
  useEffect(function () {
    setTimeout(function () {
      setShow('');
    }, 4000);
  }, []);
  var animationAction = function animationAction(ss) {
    setShow(ss);
    setTimeout(function () {
      setShow('');
    }, 1000);
  };
  return /*#__PURE__*/_jsxs(View, {
    children: [animations.map(function (item) {
      return /*#__PURE__*/_jsx(Cell, {
        title: item,
        onClick: function onClick() {
          return animationAction(item);
        }
      }, item);
    }), animations.map(function (item) {
      return /*#__PURE__*/_jsx(Transition, {
        duration: {
          enter: 300,
          leave: 1000
        },
        className: "center-x",
        enterClass: "vanEnterClass",
        enterActiveClass: "vanEnterActiveClass",
        leaveActiveClass: "vanLeaveActiveClass",
        leaveToClass: "vanLeaveToClass",
        show: show === item,
        name: item
      }, "".concat(item, "tran"));
    })]
  });
}