上QQ阅读APP看本书,新人免费读10天
设备和账号都新为新人
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 以不同的动画效果隐藏各个标签
上述动画效果的实现代码如下: