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