Плавная анимация на div с клипом

Я хотел бы добиться плавной анимации при наведении, где элемент скользит, элемент обрезается с помощью клипа, но когда он скользит в нем, он выглядит все зубчатым, пока он не достигнет конечная позиция, есть ли способ, чтобы он не выглядел зубчатым? Или лучшее решение с использованием аналогичного простого кода? Код и JSFiddle:Плавная анимация на div с клипом

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

источник

2016-10-14 Sergi

Вы можете сделать это без 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; 
}

источник

2016-10-14 11:59:20 Okba

ответ

Смежные вопросы