## Transitions Vous pouvez utiliser les transitions d'Element Plus directement. Mais avant ça, merci de lire la [documentation](https://vuejs.org/v2/api/#transition). ### Fade :::demo Il y a deux effets de fading: `el-fade-in-linear` et `el-fade-in`. ```html <template> <div> <el-button @click="show = !show">Cliquez ici</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 :::demo `el-zoom-in-center`, `el-zoom-in-top` et `el-zoom-in-bottom` sont fournis. ```html <template> <div> <el-button @click="show2 = !show2">Cliquez ici</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 Pour l'effet collapse, utilisez le composant `el-collapse-transition`. :::demo ```html <template> <div> <el-button @click="show3 = !show3">Cliquez ici</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> ``` ::: ### À la demande ```js // fade/zoom import 'element-plus/lib/theme-chalk/base.css'; // collapse import { ElCollapseTransition } from 'element-plus'; import Vue from 'vue' Vue.component(ElCollapseTransition.name, ElCollapseTransition) ```