添加删除及背景颜色变化的动画_html添加背景颜色动画-优快云博客

博客围绕Vue展开，但具体内容缺失，推测可能涉及Vue在前端开发中的应用、特性等信息技术相关内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<script src="vue-2.4.0.js"></script>
	<style>
		li{
		border:1px dashed #999;
		margin:5px;
		line-height: 5px;
		padding: 10px;
		}
		.v-enter,
		.v-leave-to{
			opacity: 0;
			transform: translateX(80px);
		}
		.v-enter-active,
		.v-leave-active{
			transition: all 1s ease;
		}
		.v-move{
			transition: all 1s ease;
		}
		.v-leave-active{
			position: absolute;
			width: 100%;
		}
		li:hover{
			background-color: red;
			transition: all 1s ease;
		}
	</style>
	<body>
	<div id="app">
		<div>
			<label>ID:
				<input type="text" v-model="id"/>
			</label>
			<label>name:
				<input type="text" v-model="name"/>
			</label>
			<input type="button" value="添加" @click="add"/>
		</div>

			<!-- 给transition-group添加appear属性，实现入场效果 -->
			<!-- 如果不为transition设置tag属性，指定元素，默认渲染为span标签 -->
			<transition-group appear tag="ul">
			<!-- 如果要为v-for循环设置动画，必须为每一个元素设置：key属性 -->
			<li v-for="(item,i) in list" :key="item.id" @click="del(i)">{{item.id}}------{{item.name}}</li>
			</transition-group>

	 </div>
	 
	 <script>
	 		  // 创建 Vue 实例，得到 ViewModel
	 		  var vm = new Vue({
	 		    el: '#app',
	 		    data: {
					id:'',
					name:'',
	 				list:[
						{id:1,name:'sss'},
						{id:2,name:'sss是'},
						{id:3,name:'sss出'},
						{id:4,name:'sss水痘'}
					]	
	 			},
				methods: {
					add(){
						this.list.push({id:this.id,name:this.name})
						this.name=this.id=''
					},
					del(i){
						this.list.splice(i,1)
					}
					}
				})
	</script>
	</body>
</html>

```![在这里插入图片描述](https://img-blog.csdnimg.cn/20190711210357268.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NldmVuX2RydW5r,size_16,color_FFFFFF,t_70)