如何使用anime.js支持供应商前缀

Question

我正在动画剪辑路径，这工作很棒，直到我到达safari，我需要-webkit-前缀。

我知道我可以使用css将其动画化，但我需要将变量动态分配到位置的剪辑路径中。一些在普通的老式css中做不到的事情。

这是我的anime.js对象

anime({
    targets: '.contact-area',
    clipPath: [`circle(0% at ${coords.centerX}px ${coords.centerY}px)`, `circle(140% at ${coords.centerX}px ${coords.centerY}px)`],
    duration: 350,
    easing: 'easeInOutQuint'
});

理想情况下，我会使用anime.js来开箱即用地支持它，也许我遗漏了一些东西。

我在文档或在线上找不到任何这种性质的东西，所以如果有任何解决办法，任何人都可以想到，我对想法持开放态度。我正在使用anime.js的其他方面的网站(动画标志等)，所以我想坚持使用它，如果可能的话。

Answer 1

使用完整的CSS属性名称和值，并用引号括起来。

在您的案例中：

anime({
    targets: '.contact-area',
    "-webkit-clip-path": "your-css-clip-path-property-value-here",
    duration: 350,
    easing: 'easeInOutQuint'
});