滚动时平滑更改剪辑路径

Question

<script>     
$("flexbox.center").scroll(changeClass);

function changeClass() {
    if($("#coverphoto").hasClass('.coverphoto')){
        $("#coverphoto").removeClass("coverphoto").addClass("newshape");
    }
    else{
        $("#coverphoto").removeClass("newshape").addClass("coverphoto");
    }
}       
 </script>


clip-path: polygon(0% 0%, 100% 0%, 100% 38.5%, 28.5% 65%, 0 65%);
transition: 0.5s ease-in-out;
-----
clip-path: polygon(0% 0%, 100% 0%, 100% 53%, 41% 53%, 0 53%);
transition: 0.5s ease-in-out;

你好，

我的目标是在滚动时平滑地更改剪切图像的形状。 我的方法是简单地在滚动的两个 css 属性之间切换，但这不起作用。 （顺便说一句，这与 :hover 在初始 css 属性上完美配合）

任何提示都非常感谢，对我来说意义重大！

Answer 1

你的代码有错误，hasClass() 函数没有选择器，只有类名：

function changeClass() {
  if ($("#cover").hasClass('coverphoto')) {
    $("#cover").removeClass("coverphoto").addClass("newshape");
  } else {
    $("#cover").removeClass("newshape").addClass("coverphoto");
  }
}

.coverphoto {
  clip-path: polygon(0% 0%, 100% 0%, 100% 38.5%, 28.5% 65%, 0 65%);
  transition: 0.5s ease-in-out;
}

.newshape {
  clip-path: polygon(0% 0%, 100% 0%, 100% 53%, 41% 53%, 0 53%);
  transition: 0.5s ease-in-out;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="cover" class="coverphoto">
  <img src="https://lorempixel.com/400/150/">
</div>
<button onClick="changeClass()">change</button>

顺便说一句，您可以通过简单地使用 toggleClass() 来优化您的逻辑：

function changeClass() {
  $("#cover").toggleClass("newshape");
}

.coverphoto {
  clip-path: polygon(0% 0%, 100% 0%, 100% 38.5%, 28.5% 65%, 0 65%);
  transition: 0.5s ease-in-out;
}

.newshape {
  clip-path: polygon(0% 0%, 100% 0%, 100% 53%, 41% 53%, 0 53%);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="cover" class="coverphoto">
  <img src="https://lorempixel.com/400/150/">
</div>
<button onClick="changeClass()">change</button>

这里是滚动事件的触发器：

$(document).scroll(function() {
  if ($(window).scrollTop() <= 150) {
    $("#cover").removeClass("newshape");
  } else {
    $("#cover").addClass("newshape");
  }
});

body {
  height: 150vh;
}

.coverphoto {
  position: fixed;
  clip-path: polygon(0% 0%, 100% 0%, 100% 38.5%, 28.5% 65%, 0 65%);
  transition: 0.5s ease-in-out;
}

.newshape {
  clip-path: polygon(0% 0%, 100% 0%, 100% 53%, 41% 53%, 0 53%);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="cover" class="coverphoto">
  <img src="https://lorempixel.com/400/150/">
</div>