一个元素同时使用小程序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>