购买
下载掌阅APP,畅读海量书库
立即打开
畅读海量书库
扫码下载掌阅APP

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 以不同的动画效果隐藏各个标签

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

点击中间区域
呼出菜单
上一章
目录
下一章
×