Vue入门笔记Day 8
2021/4/9 18:59:05
本文主要是介绍Vue入门笔记Day 8,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
一.vue中的css动画原理
1.过渡显示
(1)transition标签
transition表示包裹的内容会有一个动画过渡效果,动画效果必须包含在transition标签里。
(2)动画流程
transition包裹后会vue会自动分析css样式,构建一个动画流程。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>vue中的css动画原理</title> <script src="../vue.js" type="text/javascript" charset="utf-8"></script> <style type="text/css"> .fade-enter { opacity: 0; } /* fade-enter被移除,opacity将恢复到1 */ /* 这个变化将在3s种内完成 */ .fade-enter-active { transition: opacity 3s; } /* 对opacity进行transition监控,若opacity变化会在三秒钟从0变到opacity的值 */ /* .v-enter{ opacity: 0; } .v-enter-active{ transition: opacity 3s; } */ </style> </head> <body> <div id="root"> <transition name="fade"> <!-- 不屑name默认前缀为v --> <!-- 动画效果必须包含在transition标签里 transition表示包裹的内容会有一个动画过渡效果--> <!-- transition包裹后会vue会自动分析css样式,构建一个动画流程 --> <div v-if="show"> hello world </div> </transition> <button type="button" @click="handleClick">切换</button> </div> <script type="text/javascript"> var vm = new Vue({ el:'#root', data:{ show:true }, methods:{ handleClick:function(){ this.show=!this.show } } }) </script> </body> </html>
流程:a.动画将要执行时,fade-enter与fade-enter-active生成。
b.第二帧时,fade-enter被消除,opacity将恢复到1。
c.将会在3s内完成恢复。
2.过渡隐藏
(1)动画流程
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="../vue.js" type="text/javascript" charset="utf-8"></script> <style type="text/css"> .v-enter{ opacity: 0; } .v-enter-active{ transition: opacity 20s; } .v-leave-to{ opacity: 0; } .v-leave-active{ transition: opacity 5s; } </style> </head> <body> <div id="root"> <transition> <div v-if="show"> <!-- v-if与v-show都可以只要用transition包裹 --> hello world </div> </transition> <button type="button" @click="handleClick">切换</button> </div> <script type="text/javascript"> var vm = new Vue({ el:'#root', data:{ show:true }, methods:{ handleClick:function(){ this.show=!this.show } } }) </script> </body> </html>
这篇关于Vue入门笔记Day 8的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-09-28基于Python+Vue开发的口腔牙科预约管理系统
- 2024-09-28基于Python+Vue开发的酒店客房预订管理系统
- 2024-09-27使用js将ETH账户的资产打散其他账户web3
- 2024-09-27我轻松地将我的 React.js 应用程序翻译成了多种语言。下面是我是如何做到的... ??
- 2024-09-27?? 使用 useMemo 和 useCallback 加速 React:告别缓慢的重新渲染!??
- 2024-09-27Vue CLI多环境配置教程:新手入门指南
- 2024-09-27Vue CLI多环境配置教程:快速入门指南
- 2024-09-27Vue CLI教程:新手入门指南
- 2024-09-27Vue CLI教程:初学者快速入门指南
- 2024-09-27Vue3公共组件教程:入门与实践