是否可以使用 jQuery 为 css 剪辑路径属性设置动画？

Posted 2023-05-08

【中文标题】是否可以使用 jQuery 为 css 剪辑路径属性设置动画？

【英文标题】：Is it possible to animate the css clip-path property using jQuery?

【发布时间】：2021-01-14 13:55:22

【问题描述】：

我有一些元素的属性是通过 jQuery animate() 方法改变的：

$('#mySidenav').animate("width": '-=190');
$('#main_address').animate("padding-left": '-=190');
$('.oberflaeche').animate('margin-left':'-=190');

此外，我在 .oberflaeche 元素中还有另一个绝对定位元素，由于上述操作，在内容向左移动后需要扩展该元素，以便仍然正确地适合其容器。

为此，我使用了可以正常工作的 css 属性 clip-path：

clip-path: inset(0px var(--clipSize) 0px 0px);

发生的唯一问题是我必须动态更改剪辑路径属性，因为窗口大小不同。目前我正在通过基于类的 css 来做到这一点，因为我不确定 jQuery 是否可行。由于方法不同（jQuery 与 css），这两种效果不会同时显示 - css 剪辑路径效果不协调。我已经尝试使用 transition-delay 属性和 transition-timing-function 来解决这个问题，但我没有运气。

所以问题是：是否可以像使用宽度或填充的 css 属性一样为 clip-path 属性设置动画以达到一致的效果？我正在寻找类似的东西

$('#dynamic_element').animate('clip-path': 'inset(0px '+variable_pixel+' 0px 0px)');

我可以调用其他动画。

非常感谢任何帮助。提前致谢！

【参考方案1】：

根据 georg 的建议（请参阅：https://***.com/a/16857838/7323120），我自己解决了这个问题。使用 animate 方法，您可以迭代自定义值范围并在方法的回调中调整相应的 css，例如：

$(step: 0).animate(step: 80, 
   step: function(val) 
      // val equals the current step
      $('#target').css('clip-path', "inset(0px "+val+"px 0px 0px)")
   
);