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 相关文章推荐
Some tips of wmi scripting in jscript (1)
Apr 03 Javascript
Jquery下的26个实用小技巧(jQuery tips, tricks &amp; solutions)
Mar 01 Javascript
实例解析jQuery插件EasyUI最常用的表单验证规则
Nov 29 Javascript
使用Vue.js创建一个时间跟踪的单页应用
Nov 28 Javascript
根据输入邮箱号跳转到相应登录地址的解决方法
Dec 13 Javascript
微信小程序调用PHP后台接口 解析纯html文本
Jun 13 Javascript
Textarea输入字数限制实例(兼容iOS&amp;安卓)
Jul 06 Javascript
详解Vue内部怎样处理props选项的多种写法
Nov 06 Javascript
jQuery - AJAX load() 实例用法详解
Aug 27 jQuery
微信小程序使用 vant Dialog组件的正确方式
Feb 21 Javascript
js实现批量删除功能
Aug 27 Javascript
JavaScript实现H5接金币功能(实例代码)
Feb 22 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
php5.3以后的版本连接sqlserver2000的方法
2014/07/28 PHP
php简单实现屏蔽指定ip段用户的访问
2015/04/29 PHP
Laravel 中获取上一篇和下一篇数据
2015/07/27 PHP
Yii2使用swiftmailer发送邮件的方法
2016/05/03 PHP
ThinkPHP中调用PHPExcel的实现代码
2017/04/08 PHP
PHP使用Nginx实现反向代理
2017/09/20 PHP
Aster vs Newbee BO3 第二场2.18
2021/03/10 DOTA
给文字加上着重号的JS代码
2013/11/12 Javascript
javascript event在FF和IE的兼容传参心得(绝对好用)
2014/07/10 Javascript
jQuery插件Skippr实现焦点图幻灯片特效
2015/04/12 Javascript
js获取元素的偏移量offset简单方法(必看)
2017/07/05 Javascript
百度地图去掉marker覆盖物或者去掉maker的label文字方法
2018/01/26 Javascript
彻底理解js面向对象之继承
2018/02/04 Javascript
vue数据初始化initState的实例详解
2019/04/11 Javascript
详解ng-alain动态表单SF表单项设置必填和正则校验
2019/06/11 Javascript
详解Vue2.5+迁移至Typescript指南
2019/08/01 Javascript
使用Vue实现调用接口加载页面初始数据
2019/10/28 Javascript
uni-app如何页面传参数的几种方法总结
2020/04/28 Javascript
[01:39:04]DOTA2-DPC中国联赛 正赛 SAG vs CDEC BO3 第二场 2月1日
2021/03/11 DOTA
Python从函数参数类型引出元组实例分析
2019/05/28 Python
python 实现在一张图中绘制一个小的子图方法
2019/07/07 Python
浅谈Python中函数的定义及其调用方法
2019/07/19 Python
Python类中方法getitem和getattr详解
2019/08/30 Python
Python 从attribute到property详解
2020/03/05 Python
jupyter lab的目录调整及设置默认浏览器为chrome的方法
2020/04/10 Python
史上最详细的Python打包成exe文件教程
2021/01/17 Python
英国排名第一的停车场运营商:NCP
2019/08/26 全球购物
测量实习生自我鉴定
2013/09/19 职场文书
工程师自我评价怎么写
2013/09/19 职场文书
签约仪式主持词
2014/03/19 职场文书
诉讼财产保全担保书
2014/05/20 职场文书
高中美术教师事迹材料
2014/08/22 职场文书
员工试用期自我鉴定范文
2014/09/15 职场文书
2014领导班子正风肃纪思想汇报
2014/09/18 职场文书
公司授权委托书格式样本
2014/10/01 职场文书
人事行政部各岗位职责说明书!
2019/07/15 职场文书