html - lottie 动画完全淡出

Question

我有一次播放乐天动画。当它完成播放时，我想将其淡出。

最好的方法是什么？

我正在尝试淡入和淡出 SVG lottie 动画。

var params = {
    container: document.getElementById('lottie'),
    renderer: 'svg',
    loop: false,
    autoplay: false,
    animationData: animationData
};

var anim;
anim = lottie.loadAnimation(params);
 anim.addEventListener('DOMLoaded',function() {
        anim.play();
});

anim.addEventListener('complete',function() {
        //anim.destroy();
        // fade out code...
});

Answer 1

尝试使用此代码在完整动画上淡出元素

    anim.onComplete = function (e) {
        // fade out code...
    }

这是一个代码笔示例：

https://codepen.io/jaredstanley/pen/NmQYQY

Answer 2

anim.onComplete = function(){
  //
}

Here's a codepen with a working example(scroll down to the btm of the js panel) https://codepen.io/jaredstanley/pen/NmQYQY