1.6 组件过渡动画

Element提供的动画过渡效果有淡入淡出、缩放、展开折叠等。其中，淡入淡出和缩放使用的组件是<transition></transition>，而淡入淡出有el-fade-in-linear和el-fade-in两种效果，缩放有el-zoom-in-center、el-zoom-in-top和el-zoom-in-bottom三种效果。读者将transition组件中name的属性修改成不同的名字（如el-fade-in-linear）即可实现相应的效果。展开折叠使用的组件为<el-collapse-transition></el-collapse-transition>。组件的动画过渡效果实例如图 1-33所示。

当单击图1-33中的“Toggle”按钮，各个标签将以不同的动画效果隐藏起来（见图1-34）；再次单击“Toggle”按钮，这些标签又会以不同的动画效果显示出来。

图1-33 组件的动画过渡效果实例

图1-34 以不同的动画效果隐藏各个标签

上述动画效果的实现代码如下：