-
Vue.js核心技术解析与uni-app跨平台实战开发学习笔记 第4章 Vue.js动画 4.1 Vue单组动画
Vue.js核心技术解析与uni-app跨平台实战开发学习笔记
第4章 Vue.js动画
4.1 Vue单组动画
Vue中的动画和CSS3中的动画不同，Vue的动画主要用于增加页面交互性，提升用户体验【例如一些淡入、淡出的简单效果，不适合做复杂的动画特效】
Vue.js官方文档
https://v2.cn.vuejs.org/v2/guide/transitions.html
这是一个完整的动画执行过程，Enter是入场动画，Leave是离场动画。
4.1.1 Enter进场动画
入场动画有两个时间点，即v-enter和v-enter-to，表示透明度从0到1的转换。
v-enter时间点表示动画进入之前的起始状态。
v-enter-to时间点表示动画进入之后的状态。
从起始状态到结束状态需要一定的时间，这个时间段就是v-enter-active。
4.1.2 Leave离场动画
离场动画同样有两个时间点和一个时间段，表示透明度从1到0的转换。
v-leave表示离开之前的状态。
v-leave-to表示离开之后的状态。
v-leave-active表示时间段。
4.1.3 举个栗子
单击按钮，控制元素的显示和隐藏。
这是以前做过的版本，点击按钮，内容直接消失，再点，立即出现，很突兀。
加上动画效果：
使用Vue动画的两个步骤：
- 用transition标签包裹需要添加动画的元素
- 添加两组CSS样式
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <title>Documenttitle> <style> /* 两个时间点 */ .v-enter, .v-leave-to{ opacity: 0; transform: translateX(100px); } .v-enter-active, .v-leave-active{ transition: all 1s ease; } style> head> <body> <div id="app" v-cloak> <input type="button" value="toggle" @click="toggleFn"> <transition> <div v-if="flag"> <h1>Helloh1> div> transition> div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script> <script> var vm = new Vue({ el: '#app', data: { msg: "Hello world", flag: true }, methods: { toggleFn() { this.flag = !this.flag } } }) script> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
运行效果
进入之后的样式不考虑，进入之前和离开之前的状态是一样的，透明度为0，opacity: 0;
-
相关阅读:
github desktop 设置 git 项目调用（链接、引用）外部 repo
ant target的depends属性
再也不想去阿里巴巴面试了，6年测开面试遭到这样打击.....
Docker：深入探讨Kong开源API 网关的力量
前端框架Vue语法部分(一)
Python3，区区一段代码，自己就可以制作动漫头像，YYDS。
C. Yet Another Card Deck-Educational Codeforces Round 107 (Rated for Div. 2)
分布式教程从0到1【1】分布式基础
Spring Cloud Gateway--配置路由的方法
JS--popstate事件--使用/教程/实例
- 原文地址：https://blog.csdn.net/weixin_44226181/article/details/126566258
