如何用原生JS实现网页元素的优雅进场和退场动画效果？

本文共计1694个文字，预计阅读时间需要7分钟。

目录前言Vue中的Transition标签简单DEMO结语前言总所周知，作为一个合格的前端搭建工，编写并添加一些基础的动画效果可以说是基本技能。以下是一些简单且实用的动画效果，可以帮助你的页面更加生动有趣。

结语作为一名前端开发者，掌握这些基本的动画技能，可以让你的页面更加吸引人。虽然这些效果相对基础，但它们是轻量级且易于实现的，非常适合入门学习。

目录

• 前言
• vue中的transition标签
• 小DEMO
• 结语

前言

总所周知啊，身为一个合格的前端搬砖工，会编写并且添加一些基础的动画效果可谓是比较基础且轻车熟路的技能了。但是据我所见，大部分的前端程序员其实只会添加进场动画，而不知道如何添加退场动画。使用方式，也是简单粗暴的添加一个css类。

比如下面这种情况，增加一个下拉选项的展开动画。我们会先准备好keyframe关键帧和animation属性的值。