Vue 过渡(动画)transition组件案例详解


Posted in Javascript onJanuary 22, 2017

Vue过度(动画),本质走的是CSS3:transtion,animation。

控制器div显示/隐藏,代码如下:

<div id="box">
    <input type="button" value="按钮" @click="toggle">
    <div id="div1" v-show="isShow"></div>
  </div>
  <script type="text/javascript">
    var vm = new Vue({
      el:'#box',
      data:{
        isShow:false
      },
      methods:{
        toggle(){
          this.isShow = !this.isShow;
        }
      }
    });
  </script>

Vue 过渡(动画)transition组件案例详解 

我们已经实现了对div的显示/隐藏,但是没有过渡(动画)效果。

1.单元素/组件的过渡

Vue提供了transition的封装组件,在下列情况中,可以给任何元素和组件添加”进入”和”离开”过渡动画。

条件渲染 (使用 v-if)

条件展示 (使用 v-show)

动态组件

组件根节点

改造:

<div id="box">
    <input type="button" value="按钮" @click="toggle">
    <transition name="fade">
      <div id="div1" v-show="isShow" transiton="fade"></div>
    </transition>
  </div>
    .fade-enter-active, .fade-leave-active {
     transition: opacity .5s
    }
    .fade-enter, .fade-leave-active {
     opacity: 0
    }

Vue 过渡(动画)transition组件案例详解

其他更多过渡动画方法,请看文档:http://cn.vuejs.org/v2/guide/transitions.html

以上所述是小编给大家介绍的Vue 过渡(动画)transition组件案例详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
innertext , insertadjacentelement , insertadjacenthtml , insertadjacenttext 等区别
Jun 29 Javascript
jquery 图片截取工具jquery.imagecropper.js
Apr 09 Javascript
浅谈JavaScript function函数种类
Dec 29 Javascript
javascript中call apply 的应用场景
Apr 16 Javascript
原生JS实现图片左右轮播
Dec 30 Javascript
js鼠标跟随运动效果
Mar 11 Javascript
react-native android状态栏的实现
Jun 15 Javascript
JS实现图片上传多次上传同一张不生效的处理方法
Aug 06 Javascript
VueJS 组件参数名命名与组件属性转化问题
Dec 03 Javascript
vue-cli中vue本地实现跨域调试接口
Jan 16 Javascript
Vue实现table上下移动功能示例
Feb 21 Javascript
Layui多选只有最后一个值的解决方法
Sep 02 Javascript
BootstrapTable请求数据时设置超时(timeout)的方法
Jan 22 #Javascript
boostrapTable的refresh和refreshOptions区别浅析
Jan 22 #Javascript
Ajax跨域实现代码(后台jsp)
Jan 21 #Javascript
JavaScript、C# URL编码、解码总结
Jan 21 #Javascript
Vue结合原生js实现自定义组件自动生成示例
Jan 21 #Javascript
jQuery基于正则表达式的表单验证功能示例
Jan 21 #Javascript
一篇文章搞定JavaScript类型转换(面试常见)
Jan 21 #Javascript
You might like
超神学院:天使彦公认最美的三个视角,网友:我的天使快下凡吧!
2020/03/02 国漫
Erlang的运算符(比较运算符,数值运算符,移位运算符,逻辑运算符)
2012/07/23 PHP
关于尾递归的使用详解
2013/05/02 PHP
使用Linux五年积累的一些经验技巧
2013/06/20 PHP
php中10个不同等级压缩优化图片操作示例
2016/11/14 PHP
jquery中的 $(&quot;#jb51&quot;)与document.getElementById(&quot;jb51&quot;) 的区别
2011/07/26 Javascript
在jQuery中 常用的选择器介绍
2013/04/16 Javascript
JS刷新当前页面的几种方法总结
2013/12/24 Javascript
详解maxlength属性在textarea里奇怪的表现
2015/12/27 Javascript
全国省市二级联动下拉菜单 js版
2016/05/10 Javascript
js实现点击图片自动提交action的简单方法
2016/10/16 Javascript
javascript基于原型链的继承及call和apply函数用法分析
2016/12/15 Javascript
详解jquery validate实现表单验证 (正则表达式)
2017/01/18 Javascript
jQuery实现简单日期格式化功能示例
2017/09/19 jQuery
js定时器+简单的动画效果实例
2017/11/10 Javascript
vue select组件的使用与禁用实现代码
2018/04/10 Javascript
vue调试工具vue-devtools安装及使用方法
2018/11/07 Javascript
微信小程序实现菜单左右联动
2020/05/19 Javascript
[08:44]和酒神一起战斗 DOTA2教你做大人
2014/03/27 DOTA
Python的Flask框架中使用Flask-Migrate扩展迁移数据库的教程
2016/06/14 Python
Python排序算法实例代码
2017/08/10 Python
Python 实现字符串中指定位置插入一个字符
2018/05/02 Python
Python使用pandas对数据进行差分运算的方法
2018/12/22 Python
深入浅析Python 中的sklearn模型选择
2019/10/12 Python
利用python实现.dcm格式图像转为.jpg格式
2020/01/13 Python
Python实现获取当前目录下文件名代码详解
2020/03/10 Python
python matplotlib 绘图 和 dpi对应关系详解
2020/03/14 Python
Python利用matplotlib绘制散点图的新手教程
2020/11/05 Python
什么是CSS3 HSLA色彩模式?HSLA模拟渐变色条
2016/04/26 HTML / CSS
世界上最好的威士忌和烈性酒购买网站:The Whisky Exchange
2016/11/20 全球购物
意大利在线高尔夫商店:Online Golf
2021/03/09 全球购物
学生处主任岗位职责
2013/12/01 职场文书
一份教室追逐打闹的检讨书
2014/09/27 职场文书
乡镇防汛工作汇报
2014/10/28 职场文书
2015年电厂工作总结范文
2015/05/13 职场文书
教师教育心得体会
2016/01/19 职场文书