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 相关文章推荐
htm调用JS代码
Mar 15 Javascript
编写跨浏览器的javascript代码必备[js多浏览器兼容写法]
Oct 29 Javascript
ejs v9 javascript模板系统
Mar 21 Javascript
JavaScript面向对象(极简主义法minimalist approach)
Jul 17 Javascript
JavaScript高级程序设计 阅读笔记(十二) js内置对象Math
Aug 14 Javascript
js中判断用户输入的值是否为空的简单实例
Dec 23 Javascript
jQuery实现宽屏图片轮播实例教程
Nov 24 Javascript
jQuery手动点击实现图片轮播特效
Apr 20 Javascript
JavaScript地理位置信息API
Jun 11 Javascript
Vue.js列表渲染绑定jQuery插件的正确姿势
Jun 29 jQuery
angular 数据绑定之[]和{{}}的区别
Sep 25 Javascript
vue3语法糖内的defineProps及defineEmits
Apr 14 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
一个分页的论坛
2006/10/09 PHP
PHP MYSQL乱码问题,使用SET NAMES utf8校正
2009/11/30 PHP
php+js实现图片的上传、裁剪、预览、提交示例
2013/08/27 PHP
thinkPHP5.0框架整体架构总览【应用,模块,MVC,驱动,行为,命名空间等】
2017/03/25 PHP
动态表单验证的操作方法和TP框架里面的ajax表单验证
2017/07/19 PHP
PDO::errorInfo讲解
2019/01/28 PHP
Smarty模板配置实例简析
2019/07/20 PHP
用javascript操作xml
2006/11/04 Javascript
javascript 操作Word和Excel的实现代码
2009/10/26 Javascript
Colortip基于jquery的信息提示框插件在IE6下面的显示问题修正方法
2010/12/06 Javascript
HTML5附件拖拽上传drop &amp; google.gears实现代码
2011/04/28 Javascript
js获取网页高度(详细整理)
2012/12/28 Javascript
你必须知道的JavaScript 变量命名规则详解
2013/05/07 Javascript
Java/JS获取flash高宽的具体方法
2013/12/27 Javascript
JS实现一个列表中包含上移下移删除等功能
2014/09/24 Javascript
JavaScript中的异常捕捉介绍
2014/12/31 Javascript
jquery Easyui快速开发总结
2015/08/20 Javascript
详解vue axios中文文档
2017/09/12 Javascript
详解vue添加删除元素的方法
2018/06/30 Javascript
JavaScript 对引擎、运行时、调用堆栈的概述理解
2018/10/22 Javascript
小程序简单两栏瀑布流效果的实现
2019/12/18 Javascript
vue keep-alive的简单总结
2021/01/25 Vue.js
Django1.3添加app提示模块不存在的解决方法
2014/08/26 Python
用Python进行基础的函数式编程的教程
2015/03/31 Python
Python使用filetype精确判断文件类型
2017/07/02 Python
django中的HTML控件及参数传递方法
2018/03/20 Python
python 实现按对象传值
2019/12/26 Python
全球最大的服务市场:Fiverr
2017/01/03 全球购物
客户代表实习人员自我鉴定
2013/09/27 职场文书
领导干部考察材料
2014/02/08 职场文书
作风大整顿心得体会
2014/09/10 职场文书
给老婆道歉的话
2015/01/20 职场文书
2015年五四青年节活动总结
2015/02/10 职场文书
感谢信的技巧及范例
2019/05/15 职场文书
2019年作为一名实习生的述职报告
2019/09/29 职场文书
如何解决php-fpm启动不了问题
2021/11/17 PHP