如何用原生JS实现详细步骤的元素进场与退场动画？

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

目录+前言+Vue中的Transition标签+小DEMO+结语+前言+总所周知，身为一个合格的前端搭建工，我会编写并添加一些基础的动画效果，这些效果可以说是比较基础且易于上手的技能。但据我所见，目前市面上相关的资料并不多。

目录

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

前言

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

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