Javascript 完成anime.js动画时的奇怪剪辑

我正在制作一系列动画，当一切结束时，似乎有一些奇怪的鬼影正在发生。在一瞬间，我的元素以较低的不透明度以原始状态显示

动画({
目标：“#大锁”，
strokeDashoffset:[0,5]，
放松：“放松，放松”，
持续时间：350，
延误：250，
放松：“易辛”
});
动画({
目标：“#锁定线”，
strokeDashoffset:[0,3]，
translateY：[{
值：'-2px'，
持续时间：550，
放松：“easeOutExpo”
},
{
值：“2px”，
持续时间：550，
放松：“easeOutExpo”
},
{
值：'-2px'，
持续时间：550，
放松：“easeOutExpo”
},
],
});
动画({
目标：“#内圈”，
translateY：[{
值：'-1px'，
时长：250，
放松：“easeOutExpo”
},
{
值：“1px”，
时长：250，
放松：“easeOutExpo”
},
{
值：'-1px'，
时长：250，
放松：“easeOutExpo”
},
{
值：0，
时长：250，
放松：“easeOutExpo”
},
],
}).完成。然后（（）=>{
动画({
目标：'.plugins not installed text'，
translateY：[{
值：“10px”，
持续时间：750
}]
});
动画({
目标：“#锁包装器”，
translateY：[{
值：'-10px'，
持续时间：750
}]
});
动画({
目标：“#未安装插件屏幕”，
不透明度：0
}).完成。然后（（）=>{
$（“#未安装插件屏幕”）.remove（）；
});
});
#未安装插件屏幕{
显示器：flex；
弯曲方向：立柱；
位置：相对位置；
宽度：100%；
}
#未安装插件屏幕。上部{
显示器：flex；
证明内容：中心；
对齐项目：居中；
弯曲方向：立柱；
z指数：2；
填充：24px 48px；
背景图像：url（'../Images/component.png'）；
背景重复：重复；
}
.演示安装内容.演示组件{
显示器：flex；
弯曲方向：立柱；
柔性包装：包装；
}
.插件未安装文本{
字体大小：15px；
文本对齐：居中；
}
#锁{
显示：块；
宽度：50px；
高度：65px；
}
#未安装插件屏幕#锁{}
#未安装插件屏幕#大锁{
行程：6162；
行程偏移：5；
/*去5号*/
}
#未安装插件屏幕#锁定线路{
行程：31 33；
笔划偏移：0；
/*去3号*/
}

#大锁{填充：无；笔划：#686868；笔划宽度：2；笔划线帽：圆形；笔划线连接：圆形；笔划斜接限制：10；}
#内圆{填充：无；笔划：#686868；笔划宽度：2；笔划线帽：圆形；笔划斜接限制：10；}
#锁定线{填充：无；笔划：#686868；笔划宽度：2；笔划线帽：圆形；笔划斜接限制：10；}
插件没有安装。
之所以发生这种情况，是因为默认动画
ease
设置为某个奇怪的曲线。当你把它和不透明度结合在一起时，会出现一种“跳跃值”，因此，由于放松，它会在一秒钟内回到较低的不透明度

只需将
easing
设置为
linear