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实现给图片加链接
Aug 15 Javascript
JS给超链接加确认对话框的方法
Feb 24 Javascript
Javascript中常用的检测方法小结
Oct 08 Javascript
Easyui笔记2:实现datagrid多行删除的示例代码
Jan 14 Javascript
Angular指令封装jQuery日期时间插件datetimepicker实现双向绑定示例
Jan 22 Javascript
原JS实现banner图的常用功能
Jun 12 Javascript
基于jQuery实现手风琴菜单、层级菜单、置顶菜单、无缝滚动效果
Jul 20 jQuery
node的process以及child_process模块学习笔记
Mar 06 Javascript
使用Object.defineProperty如何巧妙找到修改某个变量的准确代码位置
Nov 02 Javascript
vue使用laydate时间插件的方法
Nov 14 Javascript
小程序分享模块超级详解(推荐)
Apr 10 Javascript
vue 路由子组件created和mounted不起作用的解决方法
Nov 05 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
PL-880隐藏功能
2021/03/01 无线电
php 地区分类排序算法
2013/07/01 PHP
Win7下手动安装apache2.2、php5.4笔记
2015/04/03 PHP
php中PDO方式实现数据库的增删改查
2015/05/17 PHP
你不知道的文件上传漏洞php代码分析
2016/09/29 PHP
thinkPHP自动验证、自动添加及表单错误问题分析
2016/10/17 PHP
CI框架表单验证实例详解
2016/11/21 PHP
PHP观察者模式示例【Laravel框架中有用到】
2018/06/15 PHP
对联广告js flash激活
2006/10/19 Javascript
用JavaScript和注册表脚本实现右键收藏Web页选中文本
2007/01/28 Javascript
javascript与CSS复习(《精通javascript》)
2010/06/29 Javascript
jquery中使用$(#form).submit()重写提交表单无效原因分析及解决
2013/03/25 Javascript
javascript打印输出json实例
2013/11/11 Javascript
JavaScript使用pop方法移除数组最后一个元素用法实例
2015/04/06 Javascript
jquery超简单实现手风琴效果的方法
2015/06/05 Javascript
bootstrap导航栏、下拉菜单、表单的简单应用实例解析
2017/01/06 Javascript
JavaScript实现的浏览器下载文件的方法
2017/08/09 Javascript
vue实现在线翻译功能
2019/09/27 Javascript
学习python之编写简单乘法口诀表实现代码
2016/02/27 Python
win10系统中安装scrapy-1.1
2016/07/03 Python
python GUI库图形界面开发之PyQt5工具栏控件QToolBar的详细使用方法与实例
2020/02/28 Python
基于jupyter代码无法在pycharm中运行的解决方法
2020/04/21 Python
Python classmethod装饰器原理及用法解析
2020/10/17 Python
python基于Kivy写一个图形桌面时钟程序
2021/01/28 Python
canvas实现圆绘制的示例代码
2019/09/11 HTML / CSS
HTML5的语法变化介绍
2013/08/13 HTML / CSS
前后端结合实现amazeUI分页效果
2020/08/21 HTML / CSS
德国团购网站:Groupon德国
2018/03/13 全球购物
STAY JAPAN台湾:预订日本民宿
2018/07/22 全球购物
美体小铺奥地利官方网站:The Body Shop奥地利
2019/04/11 全球购物
电子商务专业学生的自我鉴定
2013/11/28 职场文书
社区网格化管理实施方案
2014/03/21 职场文书
门卫管理制度范本
2015/08/05 职场文书
纪检部部长竞选稿
2015/11/21 职场文书
20180830晚上第一届KSL半决赛 雨神vs解冻(二龙 三炮解说)
2022/04/01 星际争霸
Java实现超大Excel文件解析(XSSF,SXSSF,easyExcel)
2022/07/15 Java/Android