小程序怎么监听@keyframes关键帧动画结束

Question

wxml

....

<view class="item-new-ripple" style="{{ani1? 'animation: ripple 2s ease-in-out infinite;' : ''}}"></view>
<view class="item-new-ripple" style="{{ani2? 'animation: ripple 2s ease-in-out .6s infinite;' : ''}}"></view>
<view class="item-new-ripple" style="{{ani3? 'animation: ripple 2s ease-in-out 1s infinite;' : ''}}"></view>

....

wxss

@keyframes ripple{
    0%{
        border: 20rpx solid rgba(254, 175, 38, 1);
        transform: scale(1);
        opacity: 1;
    }
    80%{
        border: 0rpx solid rgba(254, 175, 38, 1);
        transform: scale(2);
        opacity: 0;
    }
    100%{
        border: 0rpx solid rgba(254, 175, 38, 1);
        transform: scale(2);
        opacity: 0;
    }
}

小程序有没有能监听 keyframes关键帧动画结束一次的 事件/api，想在每次关键帧动画结束的时候判断一个值来控制变量的true/false来是否挂载animation属性

Answer 1

<view bindanimationend="methodName"> </view>

可以的，文档上有写的
https://developers.weixin.qq....

Answer 2

const animated = document.querySelector('.animated');

animated.addEventListener('animationend', () => {
  console.log('Animation ended');
});

不确定小程序可不可以