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 相关文章推荐
用jquery实现学校的校历(asp.net+jquery ui 1.72)
Jan 01 Javascript
从零开始学习jQuery (四) jQuery中操作元素的属性与样式
Feb 23 Javascript
jquery实现的带缩略图的焦点图片切换(自动播放/响应鼠标动作)
Jan 23 Javascript
jquery Ajax 实现加载数据前动画效果的示例代码
Feb 07 Javascript
在HTML中插入JavaScript代码的示例
Jun 03 Javascript
实例讲解jquery与json的结合
Jan 07 Javascript
javaScript基础详解
Jan 19 Javascript
微信小程序获取手机系统信息的方法【附源码下载】
Dec 07 Javascript
React 项目迁移 Webpack Babel7的实现
Sep 12 Javascript
Node.js爬虫如何获取天气和每日问候详解
Aug 26 Javascript
JS前后端实现身份证号验证代码解析
Jul 23 Javascript
VUE 实现element upload上传图片到阿里云
Aug 12 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
数据库相关问题
2006/10/09 PHP
PHP笔记之:日期函数的使用介绍
2013/04/24 PHP
探讨:如何通过stats命令分析Memcached的内部状态
2013/06/14 PHP
php+mysql删除指定编号员工信息的方法
2015/01/14 PHP
PHP线程的内存回收问题
2016/07/08 PHP
PHP封装curl的调用接口及常用函数详解
2018/05/31 PHP
js模仿windows桌面图标排列算法具体实现(附图)
2013/06/16 Javascript
JavaScript对象之深度克隆介绍
2014/12/08 Javascript
javascript遇到html5的一些表单属性
2015/07/05 Javascript
异步JS框架的作用以及实现方法
2015/10/29 Javascript
JS实现简单易用的手机端浮动窗口显示效果
2016/09/07 Javascript
bootstrap中的 form表单属性role=&quot;form&quot;的作用详解
2017/01/20 Javascript
Vue 过渡(动画)transition组件案例详解
2017/01/22 Javascript
原生javascript实现分页效果
2017/04/21 Javascript
利用jquery去掉时光轴头尾部线条的方法实例
2017/06/16 jQuery
Angular6 正则表达式允许输入部分中文字符
2018/09/10 Javascript
怎么使用javascript深度拷贝一个数组
2019/06/06 Javascript
js实现一款简单踩白块小游戏(曾经很火)
2019/12/02 Javascript
[01:01:18]DOTA2上海特级锦标赛主赛事日 - 2 败者组第二轮#2COL VS LGD
2016/03/03 DOTA
35个Python编程小技巧
2014/04/01 Python
Python中使用Counter进行字典创建以及key数量统计的方法
2018/07/06 Python
检测python爬虫时是否代理ip伪装成功的方法
2019/07/12 Python
Python使用import导入本地脚本及导入模块的技巧总结
2019/08/07 Python
django连接oracle时setting 配置方法
2019/08/29 Python
python集合的创建、添加及删除操作示例
2019/10/08 Python
Python操作SQLite/MySQL/LMDB数据库的方法
2019/11/07 Python
Python多线程threading join和守护线程setDeamon原理详解
2020/03/18 Python
详解python的super()的作用和原理
2020/10/29 Python
最新的大学生找工作自我评价
2013/09/29 职场文书
群众路线教育实践活动自我剖析思想汇报
2014/10/04 职场文书
学习十八大宣传标语
2014/10/09 职场文书
综合办公室主任岗位职责
2015/04/01 职场文书
《藏戏》教学反思
2016/02/23 职场文书
创业计划书之DIY自助厨房
2019/09/06 职场文书
Mysql中的触发器定义及语法介绍
2022/06/25 MySQL
SpringBoot项目部署到阿里云服务器的实现步骤
2022/06/28 Java/Android