20220526补充,是自己才学疏浅了,实际上vue的transition-group包裹需要添加动画的元素，
添加appear属性，可以让元素一出现就显示动画并且编写完整的显示动画和隐藏动画的css代码
有机会将实现代码贴在下面
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="vendor/element-ui/lib/theme-chalk/index.css">
</head>
<style>
.platform{
position: absolute;
width: 600px;
height: 800px;
background-color: #eee;
}
.btn_platform{
position: absolute;
height:115px;
width:100px;
margin-top:60px;
display: inline-block;
margin-left:40px;
}
.btn_platform_img{
height:100px;
width:100px;
border-radius: 8px;
box-shadow:0px 1px 3px #4a4a4a;
}
.btn_platform_img:hover{
cursor: pointer;
box-shadow:0px 1px 5px #4a4a4a;
}
.font_platform {
position:absolute;
font-size: 16px;
color:#666;
width: 100%;
top:102px;
text-align: center;
}
</style>
<script type="text/javascript" src="vendor/jquery/jquery.min.js"></script>
<script type="text/javascript" src="vendor/vue/vue.min.js"></script>
<script type="text/javascript" src="vendor/element-ui/lib/index.js"></script>
<body>
<div id="icon" class="platform">
<div class="btn_platform" v-for="icon in icons" :id='icon.name' :style='getStyle(icon)'>
<div class="btn_platform_img"></div>
<div class="font_platform">{{ icon.name }}</div>
</div>
</div>
<button style="position: absolute;width: 10px;height: 10px;" onclick="vue_icon.changePosition()"></button>
</body>
<script>
var vue_icon = new Vue(
{
el: '#icon',
data:
{
canclick:true,
icons:[
{
name:'test1',
left:0,
top:0,
},
{
name:'test2',
left:200,
top:0,
},
{
name:'test3',
left:400,
top:0,
},
{
name:'test4',
left:0,
top:200,
},
{
name:'test5',
left:200,
top:200,
},
{
name:'test6',
left:400,
top:200,
},
{
name:'test7',
left:0,
top:400,
}
]
},
methods:{
getStyle(icon){
return "left:"+icon.left+"px;"+"top:"+icon.top+'px';
},
changePosition(){
if(this.canclick == false){
return;
}
this.canclick = false;
for(let i in this.icons){
if(this.icons[i].left==0){
$("#"+this.icons[i].name).animate({
left:"+=400px",top:"-=200px"
},500);
this.icons[i].left+=400;
this.icons[i].top-=200;
if(this.icons[i].left<0 || this.icons[i].top<0){
$("#"+this.icons[i].name).hide();
}
}else{
$("#"+this.icons[i].name).animate({
left:"-=200px"
},500);
this.icons[i].left-=200;
if(this.icons[i].left<0 || this.icons[i].top<0){
$("#"+this.icons[i].name).hide();
}
}
}
this.canclick = true;
}
}
}
);
$(document).ready(function () {
});
</script>
新车上路，只带前10个人