多次点击div动画重新开始渲染

<template>

<div class="box">

<div class="divtop" @click="showtip">

<div class="divtip tip1">1</div>

<div class="divtip tip2">2</div>

</div>

<div class="divtop" @click="showtip">

<div class="divtip tip1">1</div>

<div class="divtip tip2">2</div>

</div>

<div class="divtop" @click="showtip">

<div class="divtip tip1">1</div>

<div class="divtip tip2">2</div>

</div>

</div>

</template>

<script type="text/javascript">

export default{

name: 'resource',

data () {

return{

testTime:0,

}

},

methods: {

showtip (e) {

let list = Array.prototype.slice.call(e.srcElement.getElementsByClassName('divtip'));

let newTime = (new Date).getTime();

list.forEach(i => {

if(i.style.animationDuration){

let a = (newTime - this.testTime)/1000;

i.style.animationDuration =parseFloat(i.style.animationDuration) + a +'s';

}else{

i.style.animation ='showtime 2.5s';

}

i.addEventListener("animationend",function(e){

i.style.animation ='';

});

});

this.testTime = newTime;

},

 

hidetip () {

 

}

}

};

</script>

<style type="text/less" lang="less">

.box{

display: flex;

}

.divtop{

width: 90px;

height: 90px;

border: 1px solid red;

border-radius: 50%;

margin: 15px;

background: green;

position: relative;

@keyframes showtime{

0%{

opacity: 0;

}

5%{

opacity: 1;

}

95%{

opacity: 1;

}

100%{

opacity: 0;

}

}

 

& .divtip{

width: 20px;

height: 20px;

border: 1px solid gray;

border-radius: 50%;

opacity: 0;

position: absolute;

bottom: 0;

right: 0;

transform: rotate(0edge);

&:hover{

opacity: 1;

}

}

& .tip1{

bottom: -1rem;

right: -1rem;

transition-delay:0.02s;

}

& .tip2{

bottom: 2rem;

right: -1rem;

transition-delay:0.04s;

}

}

 

@keyframes menuanimation {

10%{

z-index: 1;

transform: scale(1);

}

90%{

z-index: 0;

transform: scale(0);

}

}

</style>