內置過渡動畫

內置過渡動畫

Element 內應用在部分組件的過渡動畫，你也能夠直接使用。在使用以前請閱讀 transition 組件文檔 。

¶fade 淡入淡出

Click Me

.el-fade-in-linear

.el-fade-in

提供 el-fade-in-linear 和 el-fade-in 兩種效果。

<template> <div> <el-button @click="show = !show">Click Me</el-button> <div style="display: flex; margin-top: 20px; height: 100px;"> <transition name="el-fade-in-linear"> <div v-show="show" class="transition-box">.el-fade-in-linear</div> </transition> <transition name="el-fade-in"> <div v-show="show" class="transition-box">.el-fade-in</div> </transition> </div> </div> </template> <script> export default { data: () => ({ show: true }) } </script> <style> .transition-box { margin-bottom: 10px; width: 200px; height: 100px; border-radius: 4px; background-color: #409EFF; text-align: center; color: #fff; padding: 40px 20px; box-sizing: border-box; margin-right: 20px; } </style> 

 

¶zoom 縮放

Click Me

.el-zoom-in-center

.el-zoom-in-top

.el-zoom-in-bottom

提供 el-zoom-in-center，el-zoom-in-top 和 el-zoom-in-bottom 三種效果。

<template> <div> <el-button @click="show2 = !show2">Click Me</el-button> <div style="display: flex; margin-top: 20px; height: 100px;"> <transition name="el-zoom-in-center"> <div v-show="show2" class="transition-box">.el-zoom-in-center</div> </transition> <transition name="el-zoom-in-top"> <div v-show="show2" class="transition-box">.el-zoom-in-top</div> </transition> <transition name="el-zoom-in-bottom"> <div v-show="show2" class="transition-box">.el-zoom-in-bottom</div> </transition> </div> </div> </template> <script> export default { data: () => ({ show2: true }) } </script> <style> .transition-box { margin-bottom: 10px; width: 200px; height: 100px; border-radius: 4px; background-color: #409EFF; text-align: center; color: #fff; padding: 40px 20px; box-sizing: border-box; margin-right: 20px; } </style> 

 

¶collapse 展開摺疊

使用 el-collapse-transition 組件實現摺疊展開效果。

Click Me

el-collapse-transition

el-collapse-transition

<template> <div> <el-button @click="show3 = !show3">Click Me</el-button> <div style="margin-top: 20px; height: 200px;"> <el-collapse-transition> <div v-show="show3"> <div class="transition-box">el-collapse-transition</div> <div class="transition-box">el-collapse-transition</div> </div> </el-collapse-transition> </div> </div> </template> <script> export default { data: () => ({ show3: true }) } </script> <style> .transition-box { margin-bottom: 10px; width: 200px; height: 100px; border-radius: 4px; background-color: #409EFF; text-align: center; color: #fff; padding: 40px 20px; box-sizing: border-box; margin-right: 20px; } </style> 

 

¶按需引入

// fade/zoom 等 import 'element-ui/lib/theme-chalk/base.css'; // collapse 展開摺疊 import CollapseTransition from 'element-ui/lib/transitions/collapse-transition'; import Vue from 'vue' Vue.component(CollapseTransition.name, CollapseTransition)