介绍 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>
);
}
就这样?没错。如果你使用 Vue 的话,可能会更简单!
<script setup>
import FrameworkList from './FrameworkList.vue'
</script>
<template>
<section class="comparison">
<FrameworkList />
<FrameworkList v-auto-animate />
</section>
</template>
当然,AutoAnimate 也能很好地与原生 JavaScript 配合使用!您只需将父 DOM 元素传递给 autoAnimate 函数即可:
const el = document.getElementById('#my-el')
autoAnimate(el)
AutoAnimate 是由我本人(Justin Schroeder )和FormKit团队制作的,从今天起,测试版已公开发布!
如果您觉得 AutoAnimate 对您有所帮助,请考虑支持我们。您可以:
文章来源:https://dev.to/justinschroeder/introducing-autoanimate-add-motion-to-your-apps-with-a-single-line-of-code-34bp