Vue 进入/离开动画效果


Posted in Javascript onDecember 26, 2017

1、示例代码

(注:写到vue单文件中了)

<template>
  <div>
    <button v-on:click="show = !show">
      Toggle
    </button>
    <transition name="fade">
      <p v-if="show">hello</p>
    </transition>
  </div>
</template>
<script>
  export default {
    data: function() {
      return {
        show: true
      }
    }
  }
</script>
<style>
  .fade-enter-active,
  .fade-leave-active {
    transition: opacity .5s
  }
  
  .fade-enter,
  .fade-leave-to {
    opacity: 0
  }
</style>

2、说明

(1)需要transition 标签包裹。

(2)6个class状态

Vue 进入/离开动画效果

(3)效果:

Vue 进入/离开动画效果

总结

以上所述是小编给大家介绍的Vue 进入/离开动画效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
解决FLASH需要点击激活的代码
Dec 20 Javascript
自写简单JS判断是否已经弹出页面
Oct 20 Javascript
javascript原型链继承用法实例分析
Jan 28 Javascript
简单了解JavaScript操作XPath的一些基本方法
Jun 03 Javascript
修改Jquery Dialog 位置的实现方法
Aug 26 Javascript
react-native-fs实现文件下载、文本存储的示例代码
Sep 22 Javascript
JS实现点击循环切换显示内容的方法
Oct 19 Javascript
ES6中数组array新增方法实例总结
Nov 07 Javascript
Koa项目搭建过程详细记录
Apr 12 Javascript
JS数组去重常用方法实例小结【4种方法】
May 28 Javascript
js如何获取图片url的Blob值并预览示例代码
Mar 07 Javascript
JS字符串常用操作方法实例小结
Jun 24 Javascript
node.js中路由,中间件,ge请求和post请求的参数详解
Dec 26 #Javascript
Angular实现可删除并计算总金额的购物车功能示例
Dec 26 #Javascript
浅谈React深度编程之受控组件与非受控组件
Dec 26 #Javascript
使用vue实现简单键盘的示例(支持移动端和pc端)
Dec 25 #Javascript
vue的一个分页组件的示例代码
Dec 25 #Javascript
jQuery图片查看插件Magnify开发详解
Dec 25 #jQuery
AngularJS实现的生成随机数与猜数字大小功能示例
Dec 25 #Javascript
You might like
PHP游戏编程25个脚本代码
2011/02/08 PHP
PHP获取中英混合字符串长度的方法
2014/06/07 PHP
php计算指定目录下文件占用空间的方法
2015/03/13 PHP
PHP扩展迁移为PHP7扩展兼容性问题记录
2016/02/15 PHP
php头像上传预览实例代码
2017/05/02 PHP
在laravel中使用Symfony的Crawler组件分析HTML
2017/06/19 PHP
修改yii2.0用户登录使用的user表为其它的表实现方法(推荐)
2017/08/01 PHP
php实现支付宝当面付(扫码支付)功能
2018/05/30 PHP
php版本CKEditor 4和CKFinder安装及配置方法图文教程
2019/06/05 PHP
(function(){})()的用法与优点
2007/03/11 Javascript
基于jQuery的的一个隔行变色,鼠标移动变色的小插件
2010/07/06 Javascript
javascript中动态加载js文件多种解决办法总结
2013/11/15 Javascript
javascript解决IE6下hover问题的方法
2015/07/28 Javascript
用js实现放大镜的效果的简单实例
2016/05/23 Javascript
jQuery easyUI datagrid 增加求和统计行的实现代码
2016/06/01 Javascript
JS实现的全排列组合算法示例
2017/10/09 Javascript
JS实现利用两个队列表示一个栈的方法
2017/12/13 Javascript
vue-cli脚手架config目录下index.js配置文件的方法
2018/03/13 Javascript
Vue前端开发规范整理(推荐)
2018/04/23 Javascript
JavaScript实现的3D旋转魔方动画效果实例代码
2019/07/31 Javascript
浅入深出Vue之自动化路由
2019/08/06 Javascript
JavaScript简易计算器制作
2020/01/17 Javascript
Vue简单封装axios之解决post请求后端接收不到参数问题
2020/02/16 Javascript
[41:41]TFT vs Secret Supermajor小组赛C组 BO3 第一场 6.3
2018/06/04 DOTA
让python的Cookie.py模块支持冒号做key的方法
2010/12/28 Python
python冒泡排序简单实现方法
2015/07/09 Python
Fabric 应用案例
2016/08/28 Python
Python2.7 实现引入自己写的类方法
2018/04/29 Python
Python安装pycurl失败的解决方法
2018/10/15 Python
你还在@微信官方?聊聊Python生成你想要的微信头像
2019/09/25 Python
python 普通克里金(Kriging)法的实现
2019/12/19 Python
加拿大鞋网:Globo Shoes
2019/12/26 全球购物
幼儿园评语大全
2014/04/17 职场文书
省级优秀毕业生主要事迹
2014/05/29 职场文书
关于vue中如何监听数组变化
2021/04/28 Vue.js
pytorch fine-tune 预训练的模型操作
2021/06/03 Python