Vue入门笔记Day 8

于 2021-04-09 17:51:21 发布
阅读量76 收藏
点赞数
分类专栏： Vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43273921/article/details/115554587
版权

一.vue中的css动画原理（transition）

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;	
			}
			/* opacity默认值为1。 */	
	</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中使用Animate.css库（keyframes）

1.在vue中如何使用@keyframes方式的动画

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>在Vue中使用Animate.css库</title>
		<script src="../vue.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			   /* 名字为bounce-in的动画效果 */
			@keyframes bounce-in{
				0%{
					transform: scale(0);
				}
				50%{
					transform: scale(1.5);
				}
				100%{
					transform: scale(1);
				}
			}
			.fade-enter-active{
				transform-origin: left center;
				animation: bounce-in 1s;  /* 一秒内运行结束 */
				
			}
			
			.fade-leave-active{
				transform-origin: left center;
				animation: bounce-in 1s reverse;   /* revers让动画反向执行 */
			}
		</style>
	</head>
	<body>
		<div id="root">
			<transition name="fade">
				<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>

自定义class名字

<!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">
			@keyframes bounce-in{
				0%{
					transform: scale(0);
				}
				50%{
					transform: scale(1.5);
				}
				100%{
					transform: scale(1);
				}
			}
			.active{
				transform-origin: left center;
				animation: bounce-in 1s;
			}
			
			.leave{
				transform-origin: left center;
				animation: bounce-in 1s reverse;
			}
		</style>
	</head>
	<body>
		<div id="root">     
			<transition name="fade"
			 enter-active-class="active"    
			 leave-active-class="leave"  
			><!-- 自定义class名字 -->
				<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>

2.使用animate.css库

animate.css网址https://animate.style/
animate.css所提供的动画就是@keyframes类型的css动画效果。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../vue.js" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" type="text/css" href="../animate.css"/>
		<style type="text/css">
			
		</style>
	</head>
	<body>
		<div id="root">
			<transition name="fade"
			 enter-active-class="animated wobble"
			 leave-active-class="animated wobble"  
			><!-- 使用animate动画，入场出场的名字都要是animated -->
				<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>

三.在vue中使用过度和动画

1.第一次显示如何有动画效果

appear-active-class要使网页第一次显示也有动画就要加上，还需要在上面声明appear

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../vue.js" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" type="text/css" href="../animate.css"/>
		<style type="text/css">
			
		</style>
	</head>
	<body>
		
		<div id="root">
			<transition name="fade"
			appear
			 enter-active-class="animated wobble"
			 leave-active-class="animated wobble"  
			 appear-active-class="animated wobble"
			><!-- 使用animate动画，入场出场的名字都要是animated -->
			 <!-- appear-active-class要使网页第一次显示也有动画就要加上，还需要在上面声明appear -->
				<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>

2.既要有@keyframes动画效果又要有transition效果

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../vue.js" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" type="text/css" href="../animate.css"/>
		<style type="text/css">
				
			.fade-enter,
			.fade-leave-to{
				opacity: 0;
			}
			.fade-enter-active,
			.fade-leave-active{
				transition: opacity 2s;
			}
			
		</style>
	</head>
	<body>
		
		<div id="root">
			<!-- type="transition"   设置动画时常与transition为准 -->
			<!-- :duration="10000" 自定义动画时间 -->
			<transition 
			<!-- type="transition" -->
			<!-- :duration="10000" -->
			:duration="{enter:5000,leave:10000}"
			<!-- enter为入场动画，leave为出场 -->
			name="fade"
			appear
			 enter-active-class="animated flash fade-enter-activa"
			 leave-active-class="animated wobble fade-leave-active"  
			 appear-active-class="animated wobble">
			<!-- 使用animate动画，入场出场的名字都要是animated -->
			 <!-- appear-active-class要使网页第一次显示也有动画就要加上，还需要在上面声明appear -->
				<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>

<!-- 总结：通过appear与 appear-active-class实现页面初次动画。
	即使用transition动画又使用@keyframes动画。
	type确定与哪一种动画时常为准。
	使用duration设置动画时常。 -->

四.Vue中的Js动画与Velocity.js的结合

1.入场动画

（1）动画钩子before-enter

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="root">
			<transition
			 name="fade" 
			 @before-enter="handleBefoeEnter"
			 @enter="handleEnter"
			 >
			 <!-- 当@before-enter运行玩，动画开始运行，动画都写在在handleEnter里。 -->
				<div v-show="show">
					Hello World
				</div>
			</transition>
			<button type="button" @click="handleClick">toggle</button>
		</div>
		<script type="text/javascript">
			var vm = new Vue({
				el:"#root",
				data:{
					show:true
				},
				methods:{
					handleClick:function(){
						this.show=!this.show
					},
					// el值是动画包裹的div标签
					handleBefoeEnter:function(el){
						el.style.color ='red'
					},
					// el值一样是动画包裹的div标签,done是回调函数
					handleEnter:function(el,done){
						setTimeout(() =>{
							el.style.color = 'green'
							done()
							//执行结束后要调用done函数，相当于告诉Vue已经执行完了
						},2000)
					},
					// 点击toggle后,变成红色,动画开始运行,2秒中变成绿色
				}
			})
		</script>
	</body>
</html>

（2）动画钩子enter与after-enter

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="root">
			<transition
			 name="fade" 
			 @before-enter="handleBefoeEnter"
			 @enter="handleEnter"
			 @after-enter="handleAfaterEnter"
			 >
			 <!-- 当@before-enter运行玩，动画开始运行，动画都写在在handleEnter里。 -->
				<div v-show="show">
					Hello World
				</div>
			</transition>
			<button type="button" @click="handleClick">toggle</button>
		</div>
		<script type="text/javascript">
			var vm = new Vue({
				el:"#root",
				data:{
					show:true
				},
				methods:{
					handleClick:function(){
						this.show=!this.show
					},
					// el值是动画包裹的div标签
					handleBefoeEnter:function(el){
						el.style.color ='red'
					},
					// el值一样是动画包裹的div标签,done是回调函数
					handleEnter:function(el,done){
						setTimeout(() =>{
							el.style.color = 'green'
							done()
							//执行结束后要调用done函数，相当于告诉Vue已经执行完了
						},2000)
						setTimeout(() => {
							done()
						},4000)
					},
					// 点击toggle后,变成红色,动画开始运行,2秒中变成绿色,4秒算结束
						
					handleAfaterEnter:function(el){
						el.style.color = "#000"
					}
				}
			})
		</script>
	</body>
</html>

2.出场动画

分别对应的动画钩子为
（1）@before-leave
（2）@leave
（3）@after-enter

3.velocity.js

阿浩！
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue入门笔记Day2
weixin_43273921的博客
03-31 91
1.MVVM模式 传统设计模式MVP：Model层:数据层 Presenter层:呈现层控制器（控制层） View层：视图层（一般指dom展示） 2.组件 组件（Component）是 Vue.js 最强大的功能之一。 组件可以扩展 HTML 元素，封装可重用的代码。 组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树： （1）全局组件 语法格式如下： Vue.component(组件名,{方法}) Vue.component("TodoItem"
Vue入门笔记Day5
weixin_43273921的博客
04-01 64
1.Vue模板语法 （1）插值表达式 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="../vue.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div i
Vue入门笔记Day 1
weixin_43273921的博客
03-31 96
1.创建Vue实例 var vm = new Vue({ }) 2. data 用于定义属性。 methods 用于定义的函数，可以通过 return 来返回函数值。 {{ }} 用于输出对象属性和函数返回值。 3.插值 数据绑定最常见的形式就是使用 {{…}}（双大括号）的文本插值. 实例 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Hello world&lt
Vue入门笔记Day7
weixin_43273921的博客
04-02 64
1.组件使用中的细节点 （1）使用is解决h5标签的bug h5编码规范tbody里面必须跟tr所以不能直接写成组件，有序列表与无序列表也一样，还有下拉列表等。 is属性解决： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>组件使用中的细节点 1.使用is解决h5标签的bug</title> <script src="../vue.js"&gt
Vue入门day01笔记
10-27
我是新手，今天的笔记，看视屏自己做的笔记，记录一下第一次用这个
Vue入门笔记以及项目源码
04-18
这个压缩包中的“Vue入门笔记以及项目源码”提供了从基础到实践的全面学习材料，覆盖了Vue的核心概念和技术。 首先，让我们按照文件名的顺序逐个解析学习内容： 1. **Day 01**：通常会涵盖Vue的基础知识，包括Vue...
vue 3.0学习笔记(从入门到精通)
10-07
本文将从入门到精通的角度详细介绍Vue 3.0的关键知识点。 首先，安装Vue 3.0的开发环境是至关重要的。你可以通过npm（Node Package Manager）全局安装Vue CLI的最新版本，命令为`npm I -g @vue/cli@next`。接着，...
尚硅谷vue3.0笔记
05-30
尚硅谷vue3.0笔记
最新尚硅谷vue系列笔记
02-11
8. **学习资源**："尚硅谷vue系列笔记"可能包含的是针对Vue.js的学习资料，涵盖基础到高级的内容，帮助开发者深入理解Vue及其应用。`vue-learning-master.zip`和`vue-advance-master.zip`可能是不同阶段的学习资源，...
matlab下载.pdf
07-14
matlab下载下载方式及注意事项
Android系统原理及开发要点详解-从入门到精通
07-13
Android系统原理及开发要点详解 Java4 Android视频教程 Android开发视频教学 从入门到精通 Android的软件管理器的开发教程视频 Android深入浅出_Android高端课程分享试听 JavaWeb Android系统的手机防盗软件的实现 Android开发入门与实战随书视频 视频列表.txt 0.0MB 开发入门与实战代码.rar 6.1MB 第9章 我来“广播”你的“意图”——Intent和Broadcast面对面.wmv 15.1MB 第8章 移动信息仓库——Android的数据存储操作之轻轻地我保护——SharedPreferences存储-2.wmv 0.6MB 第8章 移动信息仓库——Android的数据存储操作之轻轻地我保护——SharedPreferences存储-1.wmv 24.3MB 第8章 移动信息仓库——Android的数据存储操作之Android数据存储概述.wmv 57.7MB 第7章 良好的学习开端——Android基本组件介绍之友好地互动交流——对话框(Dialog)介绍与实例-2.wmv 7.
GESP等级认证 2024年6月 C++一级真题
07-14
GESP等级认证 2024年6月 C++一级真题 从官网上刚刚下载下来的,题都是热乎的,这可是最新真题 大家看一看瞧一瞧,走过路过不要错过,免费下载,全篇无水印,不好用随便吐槽我! 涵盖选择题,判断题,编程题,基础知识多,满满的干货,非常建议下载!!!!! 萌新小白来做做题,复习巩固都很合适!
大学生创业计划书(35)三份资料.doc
07-14
大学生创业计划书(35)三份资料.doc
大学生创业计划书(33)三个文档.doc
07-14
大学生创业计划书(33)三个文档.doc
大学生创业计划书(37)三份资料.doc
07-14
大学生创业计划书(37)三份资料.doc
前端分析-20230714004
07-14
前端分析-20230714004
SQL中的DELETE 语句使用详解.pdf
07-14
SQL中的DELETE 语句使用详解
selective-scan-cuda.cp310-win-amd64.pyd
最新发布
07-14
selective_scan_cuda 在Windows下对应的模块编译好的文件，可解决 No moudule named selective_scan_cuda.
vue整理的入门笔记.docx
12-10
Vue.js 是一套用于构建用户界面的...希望通过本篇入门笔记的整理和总结，能够帮助大家更好地理解和使用 Vue，并且激发大家对前端开发的兴趣和热情。同时也欢迎大家与我交流和分享更多关于 Vue 的学习心得和经验。谢谢！

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值