#webdev #css #javascript Hej Mirki cssowe, potrzebuje pomocy z małą pierdółką, jakoś nie mogę dojść dlaczego taka kompozycja nie działa. Sprawa wygląda tak: Mam sobie element `
Jakieś pomysły?
.item z img w środku i za pomocą #jquery na akcje mouseenter dodaje do niego klasę odpowiadającą kierunkowi z której strony wjechał kursor (top, right, bottom, left). Tutaj dla przykładu jest pokazana tylko akcja dla .bottom.
Po najechaniu w .item.bottom::after definiuje sobie parametry dla aftera dla akcji .bottom, czyli ma być przyklejony do dołu, po całej szerokości z zerową wysokością i ma animować się do 100% wysokości. Założenie jest takie, wy warstwa ::after wjeżdżała na img od tej strony od której wjechaliśmy kursorem...
Problem w tym, że dla :hover nie działa transition, ::after pojawia się bez animacji. Natomiast jeśli opuszczamy hovera, animacja działa poprawnie od 100% do 0 wysokości. Domyślam się, że problem leży w tym, że dane z .item.bottom::after nie są wcześniej zdefiniowane i pojawiają się dopiero w raz z pojawieniem się klasy .bottom na obiekcie.
Jeśli te dane zdefiniuje wcześniej (bez klasy) wsio hula ale ::after będzie miało różne parametry dla różnych animacji (top, right, bottom, left) i nie można wszystkich na raz zdefiniować...
.item {
position: relative;
}
.item::after {
position: absolute;
content: '';
background: rgba(0,0,0,.5);
transition: all .3s ease;
}
.item.bottom::after {
width: 100%;
height: 0;
bottom: 0;
}
.item.bottom:hover::after {
height: 100%;
}`Jakieś pomysły?
- Najlepsze
- Wszystkie komentarze
Chodzi tylko o pierwszy najazd... Brak animacji.
height: 0;dla.item` nie rozwiązuje sprawy bo height 0 jest zmiennym parametrem... dla animacji lewo i prawo nie może go tam być...Ogólnie to problem w tym, że dodanie klasy z parametrami dla animacji nie uruchamia jej...
:hoverposłużyłem się.hovera tą klasę js przypisuje chwilkę po przypisaniu klasy.bottom,.top, ...
setTimeout(function(){ t.addClass('hover'); }, 1);`Po prostu nie może to się dziać w tym samym momencie.