HarmonyOS鸿蒙Next中【快应用】addEventListener()方法无法监听动画事件

HarmonyOS鸿蒙Next中【快应用】addEventListener()方法无法监听动画事件 【关键词】

动画监听、动态改变

【问题背景】

Style中设置动画样式，然后在onshow生命周期中调用addEventListener()方法去监听动画事件，无法监听到，该方法无任何回调返回

问题代码如下：

<template>
  <!-- Only one root node is allowed in template. -->
  <div class="container" id="ani">
    <text class="title">Hello World</text>
  </div>
</template>
<style>
  .container {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    animation-name: translateX;
    animation-duration: 1000ms;
  }
  .title {
    font-size: 100px;
  }
  @keyframes translateX {
    from {
      transform: translateX(20px);
    }
    to {
      transform: translateX(200px);
    }
  }
</style>
<script>
  import prompt from '@system.prompt';
  module.exports = {
    data: {
      componentData: {},
    },
    onInit() {
      this.$page.setTitleBar({
        text: 'menu',
        textColor: '#ffffff',
        backgroundColor: '#007DFF',
        backgroundOpacity: 0.5,
        menu: true
      });
    },
    onShow(options) {
      console.log("111111111111111111111111111111111");
      var element = this.$element("ani")
      element.addEventListener("animationend", (event) => {
        console.log("22222222222222")
        prompt.showToast({
          message: 'type: ' + event.type + ', animationName: ' + event.animationName + ', elapsedTime: ' + event.elapsedTime
        })
      })
    },
  }
</script>

回调结果如下图所示：

【问题分析】

这是华为与联盟的底层实现差异导致的，华为是需要在动画效果触发前去调用监听方法才能拿到回调结果。而在onshow中调用时，动画效果已经触发，是无法监听到的。如果要获取callback结果，必须先调用addEventListener，然后再动态修改class，触发CSS动画样式效果。

【解决方法】

在动画样式触发之前调用addEventListener监听方法，动画效果的触发可以通过动态改变class来实现，具体代码如下：

<template>
  <!-- Only one root node is allowed in template. -->
  <div class="container {{name}}" id="ani">
    <text class="title">Hello World</text>
  </div>
</template>
<style>
  .container {
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .animation {
    animation-name: translateX;
    animation-duration: 1000ms;
  }
  .title {
    font-size: 100px;
  }
  @keyframes translateX {
    from {
      transform: translateX(20px);
    }
    to {
      transform: translateX(200px);
    }
  }
</style>
<script>
  import prompt from '@system.prompt';
  module.exports = {
    data: {
      componentData: {},
      name: ''
    },
    onInit() {
      this.$page.setTitleBar({
        text: 'menu',
        textColor: '#ffffff',
        backgroundColor: '#007DFF',
        backgroundOpacity: 0.5,
        menu: true
      });
    },
    onShow(options) {
      console.log("111111111111111111111111111111111");
      var element = this.$element("ani")
      element.addEventListener("animationend", (event) => {
        console.log('type: ' + event.type + ', animationName: ' + event.animationName + ', elapsedTime: ' + event.elapsedTime)
        prompt.showToast({
          message: 'type: ' + event.type + ', animationName: ' + event.animationName + ', elapsedTime: ' + event.elapsedTime
        })
      })
      this.name = "animation"
    },
  }
</script>

回调结果如下图所示：