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 相关文章推荐
JavaScript 5 新增 Array 方法实现介绍
Feb 06 Javascript
Javascript的无new构建实例详解
May 15 Javascript
Node.js批量给图片加水印的方法
Nov 15 Javascript
jQuery Form表单取值的方法
Jan 11 Javascript
JavaScript学习笔记之惰性函数示例详解
Aug 27 Javascript
JavaScript 中定义函数用 var foo = function () {} 和 function foo()区别介绍
Mar 01 Javascript
javascript显示动态时间的方法汇总
Jul 06 Javascript
Angular4.x Event (DOM事件和自定义事件详解)
Oct 09 Javascript
Vue+webpack项目配置便于维护的目录结构教程详解
Oct 14 Javascript
如何去除富文本中的html标签及vue、react、微信小程序中的过滤器
Nov 21 Javascript
15分钟上手vue3.0(小结)
May 20 Javascript
小程序实现可拖动的悬浮按钮
Sep 07 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
使用XDebug调试及单元测试覆盖率分析
2011/01/27 PHP
php 根据url自动生成缩略图并处理高并发问题
2014/01/23 PHP
cakephp常见知识点汇总
2017/02/24 PHP
简单谈谈PHP面向对象之标识对象
2017/06/27 PHP
PHP PDOStatement::setAttribute讲解
2019/02/01 PHP
jQuery仿Excel表格编辑功能的实现代码
2013/05/01 Javascript
解析使用JS 清空File控件的路径值
2013/07/08 Javascript
php跨域调用json的例子
2013/11/13 Javascript
在JavaScript应用中实现延迟加载的方法
2015/06/25 Javascript
jQuery模仿阿里云购买服务器选择购买时间长度的代码
2016/04/29 Javascript
bootstrap-table实现服务器分页的示例 (spring 后台)
2017/09/01 Javascript
总结JavaScript在IE9之前版本中内存泄露问题
2018/04/28 Javascript
详解微信小程序调起键盘性能优化
2018/07/24 Javascript
解决Vue-Router升级导致的Uncaught (in promise)问题
2020/08/07 Javascript
ajax jquery实现页面某一个div的刷新效果
2021/03/04 jQuery
使用django-crontab实现定时任务的示例
2018/02/26 Python
python表格存取的方法
2018/03/07 Python
django的登录注册系统的示例代码
2018/05/14 Python
python自动查询12306余票并发送邮箱提醒脚本
2018/05/21 Python
完美解决安装完tensorflow后pip无法使用的问题
2018/06/11 Python
python实现植物大战僵尸游戏实例代码
2019/06/10 Python
Python中PyQt5/PySide2的按钮控件使用实例
2019/08/17 Python
python集合常见运算案例解析
2019/10/17 Python
python 字典套字典或列表的示例
2019/12/16 Python
Python timer定时器两种常用方法解析
2020/01/20 Python
Python 3.8 新功能大揭秘【新手必学】
2020/02/05 Python
jupyter notebook 调用环境中的Keras或者pytorch教程
2020/04/14 Python
Python新手学习函数默认参数设置
2020/06/03 Python
写出一个方法实现冒泡排序
2016/07/08 面试题
幼儿园大班区域活动总结
2014/07/09 职场文书
四风对照检查剖析材料
2014/10/07 职场文书
2014年林业工作总结
2014/12/05 职场文书
病人写给医生的感谢信
2015/01/23 职场文书
2015年八一建军节演讲稿
2015/03/19 职场文书
消防安全主题班会
2015/08/12 职场文书
学习经验交流会演讲稿
2015/11/02 职场文书