vue学习笔记之Vue中css动画原理简单示例


Posted in Javascript onFebruary 29, 2020

本文实例讲述了Vue中css动画原理。分享给大家供大家参考,具体如下:

当transition包裹了一个元素之后,vue会自动分析元素的css样式,构建动画流程。

so,我们需要定义style。

vue中的css动画,其实就是某一个时间点,给元素再增加了一个css样式体现的。

v-if、v-show、动态组件 都可以实现过渡效果。

如果没有给transition定义name,vue中默认是.v-enter、.v-leave-to。

vue学习笔记之Vue中css动画原理简单示例

vue学习笔记之Vue中css动画原理简单示例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Vue中css动画原理</title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <style>
    .fade-enter, .fade-leave-to {
      opacity: 0;
    }
    .fade-enter-active, .fade-leave-active {
      transition: opacity 1s;
    }
  </style>
</head>
<body>
<div id="app">
  <transition name="fade">
    <div v-if="show">hello world!</div>
  </transition>
  <button @click="handleBtnClick">change</button>
</div>
</body>
</html>
<script>
  var vm = new Vue({
    el: '#app',
    data: {
      show: true
    },
    methods: {
      handleBtnClick: function () {
        this.show = !this.show
      }
    }
  })
</script>

运行结果:

vue学习笔记之Vue中css动画原理简单示例

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

希望本文所述对大家vue.js程序设计有所帮助。

Javascript 相关文章推荐
小试JQuery的AutoComplete插件
May 04 Javascript
js实现表格字段排序
Feb 19 Javascript
js 动态修改css文件的方法
Aug 05 Javascript
使用Jquery实现每日签到功能
Apr 03 Javascript
关于JS中setTimeout()无法调用带参函数问题的解决方法
Jun 21 Javascript
利用jquery给指定的table动态添加一行、删除一行的方法
Oct 12 Javascript
js处理层级数据结构的方法小结
Jan 17 Javascript
响应式框架Bootstrap栅格系统的实例
Dec 19 Javascript
nuxt.js中间件实现拦截权限判断的方法
Nov 21 Javascript
vue中tab选项卡的实现思路
Nov 25 Javascript
js实现翻牌小游戏
Jul 31 Javascript
vue elementUI批量上传文件
Apr 26 Vue.js
Vue组件化开发之通用型弹出框的实现
Feb 28 #Javascript
在vue项目实现一个ctrl+f的搜索功能
Feb 28 #Javascript
Js实现复选框的全选、全不选反选功能代码实例
Feb 28 #Javascript
基于html+css+js实现简易计算器代码实例
Feb 28 #Javascript
JsonServer安装及启动过程图解
Feb 28 #Javascript
Vue自定义组件的四种方式示例详解
Feb 28 #Javascript
Vue.js 中制作自定义选择组件的代码附演示demo
Feb 28 #Javascript
You might like
PHP时间戳使用实例代码
2008/06/07 PHP
PHP开发环境配置(MySQL数据库安装图文教程)
2010/04/28 PHP
php常用ODBC函数集(详细)
2013/06/24 PHP
提高PHP编程效率的方法
2013/11/07 PHP
php判断类是否存在函数class_exists用法分析
2014/11/14 PHP
PHP获取Exif缩略图的方法
2015/07/13 PHP
php获取远程文件大小
2015/10/20 PHP
php查询操作实现投票功能
2016/05/09 PHP
php如何计算两坐标点之间的距离
2018/12/29 PHP
jquery实现隐藏与显示动画效果/输入框字符动态递减/导航按钮切换
2013/07/01 Javascript
顶部缓冲下拉菜单导航特效的JS代码
2013/08/27 Javascript
json属性名为什么要双引号(个人猜测)
2014/07/31 Javascript
Javascript中call与apply的学习笔记
2014/09/22 Javascript
jQuery获得字体颜色16位码的方法
2016/02/20 Javascript
jQuery中弹出iframe内嵌页面元素到父页面并全屏化的实例代码
2016/12/27 Javascript
JS实现上传图片实时预览功能
2017/05/22 Javascript
JS中的函数与对象的创建方式
2019/05/12 Javascript
jQuery实现弹出层效果
2019/12/10 jQuery
js 图片懒加载的实现
2020/10/21 Javascript
Vue路由权限控制解析
2020/11/09 Javascript
Django项目开发中cookies和session的常用操作分析
2018/07/03 Python
pygame实现雷电游戏雏形开发
2018/11/20 Python
python实现几种归一化方法(Normalization Method)
2019/07/31 Python
Python类继承和多态原理解析
2020/02/05 Python
纽约21世纪百货官网:Century 21
2016/08/27 全球购物
Chantelle仙黛尔内衣美国官网:法国第一品牌内衣
2018/07/26 全球购物
意大利咖啡、浓缩咖啡和浓缩咖啡机:illy caffe
2019/03/20 全球购物
大学毕业生自我鉴定
2013/11/05 职场文书
企业法人代表授权委托书
2014/10/02 职场文书
班级光棍节联谊会策划书
2014/10/10 职场文书
2014年综合治理工作总结
2014/11/20 职场文书
三八红旗手事迹材料
2014/12/26 职场文书
大学生求职意向书
2015/05/11 职场文书
2016特色励志班级口号
2015/12/24 职场文书
Python安装及建立虚拟环境的完整步骤
2022/06/25 Servers
python 使用pandas读取csv文件的方法
2022/12/24 Python