0

我正在为剪辑路径设置动画，在我进入 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 用于网站的其他方面（动画徽标等），所以如果可能的话，我想坚持下去。

4

1 回答 1

2

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

在你的情况下：

anime({
    targets: '.contact-area',
    "-webkit-clip-path": "your-css-clip-path-property-value-here",
    duration: 350,
    easing: 'easeInOutQuint'
});
于 2019-12-24T16:48:36.723 回答