Javascript 如何使用WAAPI Document.getAnimations（）函数仅获取WAAPI动画对象

根据Mozilla Web Animations API文档，“文档界面的getAnimations（）方法返回当前有效的所有动画对象的数组，其目标元素是文档的后代。该数组包括CSS动画、CSS转换和Web动画。”

是否有任何方法可以使用它仅将Web动画对象添加到数组中，而不包括CSS动画和CSS转换

以下代码返回文档上的所有动画：

        var allAnimations;
        if (typeof document.getAnimations === 'function') {
            allAnimations = document.getAnimations();
        } else {
            allAnimations = document.timeline.getAnimations();
        }

allAnimations数组结果如下：

Array(72) [ CSSTransition, CSSTransition, CSSTransition, CSSTransition, CSSTransition, CSSTransition, Animation, Animation, Animation, Animation, … ]

我希望它只包含web动画，因此如下所示：

Array(66) [ Animation, Animation, Animation, Animation, Animation, Animation, Animation, Animation, Animation, Animation, … ]

---

您可以使用

instanceof

检查正在查看的动画类型，并使用该类型筛选列表：

const动画=[
…document.getAnimations（），
新建动画（），
];
const iscsanimation=x=>CSSAnimation的x实例；
const onlyAnimations=animations.filter（x=>x.constructor.name==='Animation'）；
console.dir（动画）；
console.dir（仅适用于动画）
。动画{
-webkit动画持续时间：.5s；
动画持续时间：.5s；
-webkit动画填充模式：两者都有；
动画填充模式：两者都有；
-webkit动画计时功能：线性；
动画计时功能：线性；
动画迭代次数：无限；
-webkit动画迭代计数：无限；
}
@-webkit关键帧反弹{
0%, 100% {
-webkit转换：translateY（0）；
}
50% {
-webkit转换：translateY（-5px）；
}
}
@关键帧反弹{
0%, 100% {
变换：translateY（0）；
}
50% {
transform:translateY（-5px）；
}
}
.弹跳{
-webkit动画名称：bounce；
动画名称：弹跳；
}
#动画示例{
宽度：20px；
高度：20px；
背景色：红色；
位置：相对位置；
顶部：100px；
左：100px；
边界半径：50%；
}
人力资源{
位置：相对位置；
顶部：92px；
左：-300px；
宽度：200px；
}
别忘了检查
cstranslation
！另外，
instanceof
在跨文档情况下可能会比较棘手，因为您可能会与错误的构造函数进行比较（请参阅）。此外，将来可能会添加更多的
动画子类型，因此测试
anim.constructor.name==='Animation'
可能比测试所有已知子类型更容易。