以下是 Element Plus 中常用的一些内置过渡类名:
1. el-fade-in:淡入动画,用于元素的显示。
2. el-fade-out:淡出动画,用于元素的隐藏。
3. el-zoom-in-center:从中心进行缩放的动画,用于元素的显示。
4. el-zoom-out-center:从中心进行缩放的动画,用于元素的隐藏。
5. el-collapse-transition:折叠过渡动画,用于折叠面板等组件的展开和收起。
6. el-collapse-x-transition:水平折叠过渡动画,用于某些水平折叠的组件。
7. el-collapse-y-transition:垂直折叠过渡动画,用于某些垂直折叠的组件。
这些过渡类名可以通过在组件的根元素上使用 class 属性来应用,或者在组件的过渡效果容器上使用。例如:
<!-- 使用 class 属性应用过渡动画 -->
<el-button class="el-fade-in">显示按钮</el-button>
<!-- 或者使用过渡效果容器 -->
<transition name="el-fade-in">
<el-button>显示按钮</el-button>
</transition>
在以上示例中,el-fade-in 类名表示淡入动画效果,你可以根据实际需要选择不同的过渡类名。这些类名会触发相应的 CSS3 过渡或动画效果。
请注意,具体的过渡效果和类名可能会根据 Element Plus 版本而有所变化,建议查阅 Element Plus 的官方文档或查看源码以获取最新的信息。
转载请注明出处:http://www.zyzy.cn/article/detail/5515/ElementPlus