vue3之动画(与vue2一致)总结就是3个单词 from active to(来去活)

最新推荐文章于 2024-08-30 20:29:15 发布

默默努力的小老弟

最新推荐文章于 2024-08-30 20:29:15 发布

阅读量127

点赞数

文章标签： vue.js 前端 html5

本文链接：https://blog.csdn.net/weixin_47039303/article/details/121543920

版权

本文通过一个简单的HTML页面展示了如何使用Vue.js的`transition-group`实现元素的进入和离开动画效果。利用CSS过渡属性创建平滑的动画过渡，并在按钮点击事件中动态添加和删除列表项，展示了Vue.js在前端开发中处理动态内容变化的能力。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
      .lk-enter-from{
		 opacity: 0;
		 transform: translateY(30px);
	  }
	  .lk-enter-active{
	  		 transition: all 1s linear;
	  }
	  .lk-enter-to{
	  		  opacity: 1;
	  }
	  
	  /* //前后放动画位置,中间放过渡 */
	  
	  .lk-leave-from{
	  		  opacity: 1;
	  }
	  .lk-leave-active{
	  		  transition: all 1s linear;
	  }
	  .lk-leave-to{
	  		  opacity: 0;
			  transform: translateY(30px);
			  /*注意,与vue3不同的是他的方向是自动取反的,
			  更加方便,如果要相反的方向那加个负号*/
	  }



	</style>
</head>
<body>
	<div id="app">
		  <transition-group name="lk">
			  <div v-for="item in list" :key="item">{{item.id}}{{item.name}}</div>
			 
			  
		  </transition-group>
		  <button type="button" @click="add">添加</button>
		  <button type="button" @click="del">删除</button>
			

    </div>




</body>
<script src="https://unpkg.com/vue@next"></script>
<script>


	const app=Vue.createApp({
       data(){
       		return {
				list:[{id:1,name:'lh'}]
			}
       },
       components:{
       
       },
       methods:{
           add(){
           	   //向数组增添一个对象 入栈
			   this.list.push({id:this.list.length+1,name:'lhx'});
		   },
		   del(){
		   	   //删除一个对象 出栈
			   this.list.pop();
			   
		   }
       }

	});
	app.mount("#app");



</script>
</html>

默默努力的小老弟

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue3之动画(与vue2一致)总结就是3个单词 from active to(来去活)

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> .lk-enter-from{ opacity: 0; transform: translateY(30px); } .lk-enter-active{ transition: all
复制链接

扫一扫