是否可以使用 jQuery 为 css 剪辑路径 属性 设置动画？
Is it possible to animate the css clip-path property using jQuery?
我有一些元素的属性是通过 jQuery animate() 方法改变的，就像这样：
$('#mySidenav').animate({"width": '-=190'});
$('#main_address').animate({"padding-left": '-=190'});
$('.oberflaeche').animate({'margin-left':'-=190'});
此外，我在 .oberflaeche 元素中还有另一个绝对定位元素，在内容由于上述操作而向左移动后需要扩展该元素，以便仍然正确地适合其容器。
为此，我使用了 css 属性 剪辑路径，效果很好：
clip-path: inset(0px var(--clipSize) 0px 0px);
出现的唯一问题是我必须动态更改剪辑路径 属性，因为 window 大小不同。目前我正在通过基于 class 的 css 来做这件事，因为我不确定 jQuery 是否可行。由于方法不同（jQuery 与 css），两种效果不会同时显示 - css 剪辑路径效果不协调。我已经尝试使用转换延迟 属性 和转换计时函数来解决这个问题，但我没有运气。
所以问题是：是否可以像使用宽度或填充的 css 属性那样对剪辑路径 属性 进行动画处理以实现一致的效果？我正在寻找类似
的东西
$('#dynamic_element').animate({'clip-path': 'inset(0px '+variable_pixel+' 0px 0px)'});
我可以在调用其他动画的地方调用它。
非常感谢任何帮助。提前致谢！
根据 georg 的建议（参见：）我自己弄明白了。使用 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)")
}
});
我有一些元素的属性是通过 jQuery animate() 方法改变的，就像这样：
$('#mySidenav').animate({"width": '-=190'});
$('#main_address').animate({"padding-left": '-=190'});
$('.oberflaeche').animate({'margin-left':'-=190'});
此外，我在 .oberflaeche 元素中还有另一个绝对定位元素，在内容由于上述操作而向左移动后需要扩展该元素，以便仍然正确地适合其容器。
为此，我使用了 css 属性 剪辑路径，效果很好：
clip-path: inset(0px var(--clipSize) 0px 0px);
出现的唯一问题是我必须动态更改剪辑路径 属性，因为 window 大小不同。目前我正在通过基于 class 的 css 来做这件事，因为我不确定 jQuery 是否可行。由于方法不同（jQuery 与 css），两种效果不会同时显示 - css 剪辑路径效果不协调。我已经尝试使用转换延迟 属性 和转换计时函数来解决这个问题，但我没有运气。
所以问题是：是否可以像使用宽度或填充的 css 属性那样对剪辑路径 属性 进行动画处理以实现一致的效果？我正在寻找类似
的东西$('#dynamic_element').animate({'clip-path': 'inset(0px '+variable_pixel+' 0px 0px)'});
我可以在调用其他动画的地方调用它。
非常感谢任何帮助。提前致谢！
根据 georg 的建议（参见：）我自己弄明白了。使用 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)")
}
});