Element UI手冊：https://cloud.tencent.com/developer/doc/1270
中文文檔：http://element-cn.eleme.io/#/zh-CN
github地址：https://github.com/ElemeFE/element

---

接前兩篇，
Vue框架Element UI教程-安裝環境搭建（一）https://www.jianshu.com/p/ab3c34a95128

今天繼續寫組件的運用相關例子
點擊按鈕的時候，元素會呈現一個出現和隱藏的動畫功能。

<template><div><el-button @click="show = !show">點擊按鈕</el-button><div style="display: flex; margin-top: 20px; height: 100px;"><transition name="el-fade-in-linear"><div v-show="show" class="transition-box">我會消失在人海之中</div></transition></div></div> </template> <script>export default {data: () => ({show: true})} </script> <style>.transition-box {margin-bottom: 10px;width: 300px;height: 100px;border-radius: 4px;background-color: #42B983;text-align: center;color: #fff;padding: 40px 20px;box-sizing: border-box;margin-left: 520px;} </style>

效果大家可以自行嘗試。

---

原文作者：祈澈姑娘 Element UI手冊：https://cloud.tencent.com/developer/doc/1270
中文文檔：http://element-cn.eleme.io/#/zh-CN
github地址：https://github.com/ElemeFE/element

---

接前兩篇，
Vue框架Element UI教程-安裝環境搭建（一）https://www.jianshu.com/p/ab3c34a95128

今天繼續寫組件的運用相關例子
點擊按鈕的時候，元素會呈現一個出現和隱藏的動畫功能。

<template><div><el-button @click="show = !show">點擊按鈕</el-button><div style="display: flex; margin-top: 20px; height: 100px;"><transition name="el-fade-in-linear"><div v-show="show" class="transition-box">我會消失在人海之中</div></transition></div></div> </template> <script>export default {data: () => ({show: true})} </script> <style>.transition-box {margin-bottom: 10px;width: 300px;height: 100px;border-radius: 4px;background-color: #42B983;text-align: center;color: #fff;padding: 40px 20px;box-sizing: border-box;margin-left: 520px;} </style>

效果大家可以自行嘗試。

---

總結

以上是生活随笔為你收集整理的Vue动画出现和隐藏的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。