Tartışma animasyonunda yaşadığım CSS sorunu

flaky

Tartışmaların üzerine mouse ile gelince bir animasyon çalıştırıyorum. Aşağıya örnek olarak eklediğim kodu forumda bulup animasyonunu biraz daha geliştirdim.

Çok iyi çalışıyor fakat şöyle bir sorun var eğer ana sayfada tartışmanın üzerine gelip sağ taraftaki dikey üç nokta simgesinden dropdown menüyü açarsam seçeneklere doğru mouse u aşağıdaki tartışma başlıklarının hizasında dropdown menü içerisinde haraket ettirince sanırım tekrar shake yapmaya çalışıyor ve dropdown menünün arkaplanı yok oluyor. Bunu nasıl çözebilirim fikri olan var mı?

`
@media (min-width: 768px) {
.DiscussionListItem {padding-right: 15px;}}
.DiscussionListItem:hover {
animation: shake 5s ease infinite;
transform-origin: 50% 50%;
animation-iteration-count: 1;
}

@keyframes shake{
0% { transform:translate(0,0) }
1.78571% { transform:translate(5px,0) }
3.57143% { transform:translate(0,0) }
5.35714% { transform:translate(5px,0) }
7.14286% { transform:translate(0,0) }
8.92857% { transform:translate(5px,0) }
10.71429% { transform:translate(0,0) }
100% { transform:translate(0,0) }
}
`

flaky

Bir çözüm buldum, belki daha iyi bir yolu vardır ama ben yinede paylaşmak istedim. jQuery’yi adminden özel alt bilgi alanında CDN linki aracılığıyla siteye dahil edin.

Devamında aşağıda vereceğim kodu yine özel alt bilgi alanına jQuery linkinden sonra ekleyin fakat burada dikkat etmeniz gereken nokta animasyonları if ve elselerden kendinize göre değiştirmeniz gerekiyor. Kod mouse haraketleri ve dropdown menünün açılış senaryolarına göre animasyon uzunluğunu değiştiriyor.

$("body").delegate(".Dropdown-toggle", 'click', function() { let animationFinisher = $(".open .Dropdown-menu").css("display"); if (animationFinisher == 'block') { $('.DiscussionListItem:hover').css({ 'animation-duration': '0s' }); } } ); $("body").delegate(".DiscussionListItem", 'mouseover', function() { let animationFinisher = $(".open .Dropdown-menu").css("display"); if (animationFinisher == 'none' || animationFinisher == undefined) { $(this).css({ 'animation-duration': '5s' }); } else { $(this).css({ 'animation-duration': '0s' }); } } );