介绍 AutoAnimate — 用一行代码为您的应用添加动作。

2025-06-07

介绍 AutoAnimate — 用一行代码为您的应用添加动作。

在构建用户界面时,一些细微的动效能带来巨大的改变。无论是在待办事项列表中添加任务、删除联系人,还是对播放列表进行排序,拥有细微动效的界面无疑能带来卓越的用户体验。既然我们知道某些动效更好,为什么我们却很少添加呢?

运动可能难以想象

答案很简单—— 这太耗时了。毕竟时间就是金钱,而优化“细微”的用户体验细节通常超出了除大品牌之外所有品牌的预算。

平心而论,添加 UI 动画可能很痛苦——尤其是对于新增、移除和移动 DOM 元素而言。例如,在为列表中添加新项目添加动画时,经验丰富的开发人员可能会执行以下操作:

  • 测量父元素并max-height明确设置它,并为其添加一个带有 css 过渡的类max-height
  • 在将新列表项添加到 DOM 之前,向其添加一个类,以设置其初始不透明度和转换状态(可能略微缩小)。
  • 注入元素,并设置一个非常短的超时时间来删除初始类。
  • 计算所添加元素的高度,并将父元素的高度增加max-height该量。
  • 等待高度完全过渡,并删除明确的最大高度属性。

这可不好玩!来试试 AutoAnimate 吧。

自动动画徽标

AutoAnimate 是一个轻量级(1.9Kb)、零配置、嵌入式的动画库,可以自动将过渡动画应用于 DOM 中添加、移除或移动的元素。它只需一行代码即可实现,并且兼容 React、Vue 以及任何其他 JavaScript 框架。

AutoAnimate 的目标是大幅改善应用程序的用户体验,同时不影响开发人员的实施时间或性能预算。

让我们看一下用 React 编写的两个相同的列表 - 一个带有 AutoAnimate,一个没有。

列表的细节只是标准的 React 代码,但让我们看看如何将动画添加到第二个列表中:



import React from 'react';
import FrameworkList from './FrameworkList';
import { useAutoAnimate } from '@formkit/auto-animate/react';

export default function App() {
  const [animationParent] = useAutoAnimate();
  return (
    <section className="comparison">
      <FrameworkList />
      <FrameworkList ref={animationParent} />
    </section>
  );
}


Enter fullscreen mode Exit fullscreen mode

就这样?没错。如果你使用 Vue 的话,可能会更简单!



<script setup>
import FrameworkList from './FrameworkList.vue'
</script>

<template>
  <section class="comparison">
    <FrameworkList />
    <FrameworkList v-auto-animate />
  </section>
</template>


Enter fullscreen mode Exit fullscreen mode

当然,AutoAnimate 也能很好地与原生 JavaScript 配合使用!您只需将父 DOM 元素传递给 autoAnimate 函数即可:



const el = document.getElementById('#my-el')
autoAnimate(el)


Enter fullscreen mode Exit fullscreen mode

AutoAnimate 是由我本人(Justin Schroeder )和FormKit团队制作的,从今天起,测试版已公开发布!


示例和文档

如果您觉得 AutoAnimate 对您有所帮助,请考虑支持我们。您可以:

文章来源:https://dev.to/justinschroeder/introducing-autoanimate-add-motion-to-your-apps-with-a-single-line-of-code-34bp
PREV
介绍 Vue Formulate — 真正令人愉悦的表单创作。
NEXT
使用 Vue Formulate、S3 和 Lambda 实现更好的上传