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

【问题标题】：Is it possible to animate the css clip-path property using jQuery?是否可以使用 jQuery 为 css 剪辑路径属性设置动画？
【发布时间】：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)'});

我可以调用其他动画。

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

【问题讨论】：

标签： javascript jquery css jquery-animate clip-path

【解决方案1】：

根据 georg 的建议（请参阅：https://stackoverflow.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)")
   }
});

【讨论】：