如何使用 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'
});

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

How to support vendor prefixes with anime.js

javascript

css

web-animations

anime.js