使用剪辑路径在 div 上平滑动画

Question

我想在元素滑入的悬停时实现平滑的动画，该元素是使用 clip-path 剪辑的，但是当它滑入时它看起来都是锯齿状的，直到它到达最终位置，有没有办法让它看起来不锯齿？或者使用类似的简单代码的更好解决方案？代码和 JSFiddle：

HTML

<html>
<body>

<div class ="mainCard">

  <div class="topEntrance fadeInDown">
  </div>

</div><!--mainCard-->

</body>
</html>

CSS

.mainCard {
  background-color: blue;
  height: 500px;
  width: 400px;
 }

.topEntrance {
  background-color: black;
  height: 200px;
  width: 400px;
  -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 35%);
  color: white;
 }

Javascript

$(".topEntrance").hide();

$(".mainCard").on('mouseenter', function() {
  $(".topEntrance").animate({
    width: "toggle"
 })
  });


$(".mainCard").on('mouseleave', function() {
  $(".topEntrance").animate({
    width: "toggle"
 })
})

Answer 1

你可以不用 javascript，只使用 CSS。

首先删除您的 javascript，然后将此更改添加到您的 CSS：

.mainCard {
  background-color: blue;
  height: 500px;
  width: 400px;
  overflow:hidden;
}

.topEntrance {
  background-color: black;
  height: 200px;
  width: 400px;
  -webkit-clip-path: polygon(100% 100%, 100% 0, 0 0, 0 35%);
  color: white;
  position:relative;
  left:-100%;
  -webkit-transition: all 0.4s ease;
}

.mainCard:hover .topEntrance{
  left:0;
}

使用剪辑路径在 div 上平滑动画

Smooth animation on a div with clip-path

css

jquery

jquery-animate