console
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.css">
<style type="text/css">
body{padding:20px;}
li{width:100%;}
.hhc-enter-to,
.hhc-leave{
}
.hhc-enter,
.hhc-leave-to{
opacity: 0;
transform: translateX(200px);
}
.hhc-enter-active,
.hhc-leave-active{
transition: .5s;
}
.hhc-move{
transition: .5s;
}
.hhc-leave-active{
position: absolute;
}
.globe{
width:50px;
height:50px;
text-align: center;
color:white;
background-color: red;
border-radius: 50%;
}
</style>
</head>
<body>
<div id="app">
<form class="form-inline">
<input type="" v-model="name" class=" form-control">
<input type="button" value="add" @click="add" class="btn btn-primary">
</form>
<transition-group name="hhc" tar="ul" class="list-group" appear>
<li
v-for="item,index in list"
:key="item.id"
class="list-group-item danger"
@click="del(index)">
{{item.id}}---{{item.name}}
</li>
</transition-group>
<hr>
<input type="button" name="" value="添加购物车" @click="flag=!flag">
<transition
@before-enter="beforeEnter"
@enter="enter"
@after-enter="afterEnter">
<div class="globe" v-show="flag">1</div>
</transition>
</div>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
<script type="text/javascript">
new Vue({
data:{
flag:false,
id:2,
name:'',
list:[
{
name:'张三',
id:1
},
{
name:'李四',
id:2
}
]
},
methods:{
add(){
this.list.push({name:this.name,id:++this.id})
this.name = ''
},
del(index){
this.list.splice(index,1)
},
beforeEnter(el){
console.log('start')
el.innerHTML = +(el.innerHTML)+1
el.style.transform = 'none'
},
enter(el,done){
el.offsetTop;
el.style.transform = 'translate(100px,400px)'
el.style.transition = '.5s'
done()
},
afterEnter(el){
this.flag = !this.flag
},
}
}).$mount('#app')
</script>
</body>
</html>