AutoAnimate

June 1, 2023

auto-animate

https://auto-animate.formkit.com/

npm install @formkit/auto-animate

usage

autoAnimate 函数的第一个参数指定父元素，动画将作用与该父元素和其直接子元素

具体来说，动画将在下列情况触发：

子元素添加至 DOM 节点
子元素从 DOM 节点中移除
子元素在 DOM 节点中移动

若父元素是静态定位，则将自动添加 position: relative

flex 布局时，子元素的位置可能不能立即计算出（例如：flex-grow: 1），此时 autoAnimate 将无效
此时可以手动指定子元素尺寸

import autoAnimate from "https://unpkg.com/@formkit/auto-animate";

autoAnimate(el, {
  // 动画持续时间，单位毫秒 (default: 250)
  duration: 250,
  // Easing for motion (default: 'ease-in-out')
  easing: 'ease-in-out'
  // 强制开启动画，即不遵守 prefers-reduced-motion 规则
  disrespectUserMotionPreference: false
})

←Back to home