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 相关文章推荐
文本框获得焦点和失去焦点的判断代码
Mar 18 Javascript
文本框输入时 实现自动提示(像百度、google一样)
Apr 05 Javascript
精心挑选的15款优秀jQuery 本特效插件和教程
Aug 06 Javascript
window.open关于浏览器拦截问题分析及解决方法
Feb 05 Javascript
在JS中解析HTML字符串示例代码
Apr 16 Javascript
jQuery制作简单柱状图实例
Jan 28 Javascript
JavaScript数据库TaffyDB用法实例分析
Jul 27 Javascript
JavaScript实现输入框与清空按钮联动效果
Sep 09 Javascript
javaScript中定义类或对象的五种方式总结
Dec 04 Javascript
清空元素html(&quot;&quot;) innerHTML=&quot;&quot; 与 empty()的区别和应用(推荐)
Aug 14 Javascript
Angular中支持SCSS的方法
Nov 18 Javascript
基于vue.js无缝滚动效果
Jan 25 Javascript
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
教你如何快捷的使用cmd访问mysql小技巧
2014/05/26 PHP
分享一则PHP定义函数代码
2015/02/26 PHP
浅谈php错误提示及查错方法
2015/07/14 PHP
jquery中eq和get的区别与使用方法
2011/04/14 Javascript
Dreamweaver jQuery智能提示插件,支持版本提示,支持1.6api
2011/07/31 Javascript
JQuery扩展插件Validate 2通过参数设置验证规则
2011/09/05 Javascript
jquery右下角弹出提示框示例代码
2013/10/08 Javascript
JavaScript中的object转换成number或string规则介绍
2014/12/31 Javascript
js中javascript:void(0) 真正含义
2020/11/05 Javascript
浅谈node.js中async异步编程
2015/10/22 Javascript
详解Node.js模块间共享数据库连接的方法
2016/05/24 Javascript
微信小程序 图片边框解决方法
2017/01/16 Javascript
微信小程序利用co处理异步流程的方法教程
2017/05/20 Javascript
解决JS外部文件中文注释出现乱码问题
2017/07/09 Javascript
(模仿京东用户注册)用JQuery实现简单表单验证,初学者必看
2018/01/08 jQuery
详解vue 数据传递的方法
2018/04/19 Javascript
微信小程序如何再次获取用户授权的方法
2019/05/10 Javascript
这样回答继承可能面试官更满意
2019/12/10 Javascript
[01:11]steam端dota2实名认证操作流程视频
2021/03/11 DOTA
Python中将字典转换为XML以及相关的命名空间解析
2015/10/15 Python
Python数据结构之栈、队列的实现代码分享
2017/12/04 Python
python3.6+django2.0开发一套学员管理系统
2018/03/03 Python
使用Python处理BAM的方法
2018/09/28 Python
Kali Linux安装ipython2 和 ipython3的方法
2019/07/11 Python
Python OpenCV调用摄像头检测人脸并截图
2020/08/20 Python
django drf框架中的user验证以及JWT拓展的介绍
2019/08/12 Python
使用python模拟命令行终端的示例
2019/08/13 Python
PyTorch中的Variable变量详解
2020/01/07 Python
Python描述符descriptor使用原理解析
2020/03/21 Python
乐天旅游台湾网站:Rakuten Travel TW
2017/06/01 全球购物
应届毕业生求职信
2013/11/30 职场文书
应届医学毕业生求职信分享
2013/12/02 职场文书
本科毕业生求职自荐信
2014/02/03 职场文书
赢在中国观后感
2015/06/02 职场文书
《合作意向书》怎么写?
2019/08/20 职场文书
Python中22个万用公式的小结
2021/07/21 Python