一个元素同时使用小程序animatiion的api和css3的animation动画，动画结束事件“animationend”可以被css3的动画结束触发，而不会被小程序animation的动画结束触发。
请问要怎么才能触发小程序animation接口的animationend事件呢？
以下是代码,使用的是mpvue框架
<template>
<div class="barrage">
<div class="barrageBox" :animation="animation" @animationend="animationend">
<div class="barrageBoxInner" >
aaaaaaaaaaaaaaa
</div>
</div>
</div>
</template>
<script>
export default {
data () {
return {
animation: ''
}
},
mounted () {
this.showAnimation()
},
methods: {
showAnimation () {
var animation = wx.createAnimation({
duration: 10000
})
animation.translateY(-500).step()
animation.translateY(0).opacity(0).step({duration: 0, timingFunction: 'step-start'})
this.animation = animation.export()
},
animationend () {
console.log('动画结束')
}
}
}
</script>
<style scoped>
.barrage{
position: absolute;
top: 0;
width: 75%;
height: 55%;
margin-left: 150rpx;
z-index: 9;
}
.barrage .barrageBox{
position: absolute;
bottom: 0;
width: auto;
height: 70rpx;
background: #0d6e7e;
border-radius: 10rpx;
border: 4rpx solid #243c65;
opacity: 0;
animation: opacity 3s linear;
animation-fill-mode:forwards;
}
@keyframes opacity {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.barrage .barrageBox .barrageBoxInner{
width: auto;
height: 65rpx;
padding:0 30rpx;
background: #01cee4;
border-radius: 10rpx;
color:#103665;
font-size: 22rpx;
text-align: center;
line-height: 60rpx;
}
</style>
