20 Vue中使用动态组件完成动画效果实现

最新推荐文章于 2024-08-09 11:45:42 发布

技术~子云

最新推荐文章于 2024-08-09 11:45:42 发布

阅读量1.2k

点赞数

分类专栏： vue 文章标签： javascript vue.js 开发语言

本文链接：https://blog.csdn.net/davice_li/article/details/127530873

版权

vue 专栏收录该内容

29 篇文章 1 订阅

订阅专栏

一、手动加样式实现动画切换

动画的模式使用属性 mode = "in-out" 先进入再隐藏 "out-in " 先隐藏再进入

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Vue中的velocity.min.js库-实现动画</title>
		<script src="../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">
			<!-- 动画的模式  使用属性  mode = "in-out" 先进入再隐藏   "out-in " 先隐藏再进入-->
			<transition	 mode = "in-out" name="fade" >
				<!-- vue 的动画是通过 向某些标签上增加样式来实现的动画效果 -->
				<div v-if="show" key='hello'>hello world</div>
				<div v-else key="bye">bye bye</div>
			</transition>
			<!-- 实现点击change 隐藏和显示 hello world的功能  -->
			<button @click="handleBtnClick">toggle</button>
		</div>

		<script type="text/javascript">
			
			var vm = new Vue({
				el: "#app",
				data:{
					show: true
				},
				methods:{
					handleBtnClick:function() {
						this.show = !this.show
					}
				}
			})
		</script>

	</body>
</html>

二、使用子组件实现动画效果

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Vue中使用动态组件完成动画效果实现</title>
		<script src="../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">
			<!-- 动画的模式  使用属性  mode = "in-out" 先进入再隐藏   "out-in " 先隐藏再进入-->
			<transition	 mode = "in-out" name="fade" >
				<!-- vue 的动画是通过 向某些标签上增加样式来实现的动画效果 -->
				<child v-if="show" key='hello'>hello world</child>
				<child-one v-else key="bye">bye bye</child-one>
			</transition>
			<!-- 实现点击change 隐藏和显示 hello world的功能  -->
			<button @click="handleBtnClick">toggle</button>
		</div>

		<script type="text/javascript">
			Vue.component("child",{
				template:"<div>child</div>"
			})

			Vue.component("child-one",{
				template:"<div>child-one</div>"
			})

			var vm = new Vue({
				el: "#app",
				data:{
					show: true
				},
				methods:{
					handleBtnClick:function() {
						this.show = !this.show
					}
				}
			})
		</script>

	</body>
</html>

三、使用动态组件方式来实现动画效果

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Vue中使用动态组件完成动画效果实现</title>
		<script src="../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">
			<!-- 动画的模式  使用属性  mode = "in-out" 先进入再隐藏   "out-in " 先隐藏再进入-->
			<transition	 mode = "in-out" name="fade" >
				<!-- vue 的动画是通过 向某些标签上增加样式来实现的动画效果 -->
				<component :is="type"></component>
			</transition>
			<!-- 实现点击change 隐藏和显示 hello world的功能  -->
			<button @click="handleBtnClick">toggle</button>
		</div>

		<script type="text/javascript">
			Vue.component('child',{
				template:'<div>child</div>'
			})

			Vue.component('child-one',{
				template:'<div>child-one</div>'
			})

			var vm = new Vue({
				el: "#app",
				data:{
					type: 'child'
				},
				methods:{
					//type 等于 child 时让其等于 child-one
					handleBtnClick:function() {
						this.type = this.type === 'child' ?"child-one" :"child"
					}
				}
			})
		</script>

	</body>
</html>