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>效果大家可以自行尝试。
