Vue2学习笔记:过渡效果css
2017-02-22 15:22
555 查看
过渡效果
Vue 提供了 transition 的封装组件,在下列情形中,可以给任何元素和组件添加 entering/leaving 过渡<!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> <script src="vue.js"></script> <style type="text/css"> .fade-enter-active, .fade-leave-active { transition: opacity .5s } .fade-enter, .fade-leave-active { opacity: 0 } </style> </head> <body> <div id="box"> <input type="button" value="按钮" @click="toggle"> <transition name="fade"> <div id="div1" v-if="isShow" transiton="fade">11111</div> </transition> </div> <script type="text/javascript"> var vm = new Vue({ el:'#box', data:{ isShow:false }, methods:{ toggle:function(){ this.isShow = !this.isShow; } } }); </script> </body> </html>
一开始不显示,点击后显示 有一个css的过渡方式
官方:https://vuefe.cn/v2/guide/transitions.htm
相关文章推荐
- UIView动画(过渡效果)的学习笔记
- UIView动画(过渡效果)的学习笔记
- learning jQuery 学习笔记七(+jQuery 1.4.1 API)-- 效果-修改内联CSS
- UIView动画(过渡效果)的学习笔记
- 学习笔记3--CSS制作鼠标放上后淡入透明遮罩层效果
- html css学习笔记-过渡,动画
- Vue.js学习笔记:过渡效果(含列表过渡)
- UIView动画(过渡效果)的学习笔记
- UIView动画(过渡效果)的学习笔记
- UIView动画(过渡效果)的学习笔记
- UIView动画(过渡效果)的学习笔记 3
- UIView动画(过渡效果)的学习笔记
- CSS学习笔记-附加篇( CSS仿淘宝首页导航条按钮布局效果)
- CSS学习笔记-附加篇( CSS+JS实现的选项卡效果(html组件))
- VUE2 第五天学习--过渡效果
- web前端学习笔记---利用css+filter完成简单的图片透明效果
- UIView动画(过渡效果)的学习笔记
- HTML入门学习笔记--CSS过渡模块(9)
- 【HTML5学习笔记】33:CSS3过渡效果
- css学习笔记(5)动态定位 滤镜