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

时间:2016-10-14 11:42:21

标签: jquery css jquery-animate

我想在悬停的地方实现一个平滑的动画,其中一个元素滑入,该元素使用剪辑路径剪切但是当它滑入时它看起来都是锯齿状的,直到它到达最终位置,是否有办法不要看起来像锯齿状?或者使用类似简单代码的更好解决方案?代码和JSFiddle:

https://jsfiddle.net/4bcvydpu/

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"
 })
})

1 个答案:

答案 0 :(得分: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;
}