jquery - 平滑修改 css 剪辑路径答案

【问题标题】：jquery - smooth modify css clip-pathjquery - 平滑修改 css 剪辑路径
【发布时间】：2019-01-28 02:29:04
【问题描述】：

我有一个带有css clip-path. 的元素，具体取决于光标位置（Xcord）jquery 修改clip-path 点。

我的代码运行良好，但即使光标快速移动，我也想减慢（缓慢而流畅）这个“动画”。

我怎样才能做到这一点？谢谢帮助

$(document).mousemove(function(getCurrentPos){
  var clip = $(".element");
  //x coordinates
  var xCord = getCurrentPos.pageX;
  //calculate %
  xPercent = xCord / $(document).width() * 100;
  var left = 90 + 10 * (xPercent / 100);
  var right = 100 - 10 * (xPercent / 100);
					
  $(".element").css('clip-path', 'polygon(0% 0%, 100% 0%, 100% ' + left + '%, 0% ' + right + '%)');
});

.element {
background:red;
width:500px;
height:150px;
clip-path:polygon(0% 0%, 100% 0%, 100% 100%, 0% 90%);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="element"></div>

【问题讨论】：

标签： jquery css mousemove clip-path

【解决方案1】：

只需在 CSS 代码上添加一个过渡

$(document).mousemove(function(getCurrentPos) {
  var clip = $(".element");
  //x coordinates
  var xCord = getCurrentPos.pageX;
  //calculate %
  xPercent = xCord / $(document).width() * 100;
  var left = 90 + 10 * (xPercent / 100);
  var right = 100 - 10 * (xPercent / 100);

  $(".element").css('clip-path', 'polygon(0% 0%, 100% 0%, 100% ' + left + '%, 0% ' + right + '%)');
});

.element {
  background: red;
  width: 500px;
  height: 150px;
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 90%);
  transition:0.5s;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="element"></div>

【讨论】：