Glatte Animation auf einem Div mit Clip-Pfad

Ich möchte eine glatte Animation auf dem Hover erreichen, wo ein Element hineingleitet, wird das Element mit Clip-Pfad abgeschnitten, aber wenn es in gleitet, sieht es alle gezackt aus, bis es das erreicht Endposition, gibt es einen Weg, um nicht gezackt auszusehen? Oder eine bessere Lösung mit ähnlich einfachem Code? Code und JSFiddle:Glatte Animation auf einem Div mit Clip-Pfad

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

Quelle

2016-10-14 Sergi

Sie können das ohne Javascript tun, nur mit CSS.

Zuerst Ihr Javascript entfernen, als diese Änderungen an Ihrem CSS hinzufügen:

.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; 
}

Quelle

2016-10-14 11:59:20 Okba

Glatte Animation auf einem Div mit Clip-Pfad

Antwort

Verwandte Themen