[LostHighway]

#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 `.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?

[garsi]

@LostHighway: #jsfiddle #codepen

[Krznl]

Nie wiem o co chodzi ale wołam @Kemsan

[rbielawski]

@LostHighway: tl;dr;

[LostHighway]

@garsi: @Krznl: @rbielawski: https://jsfiddle.net/1r5xnhjr/

Chodzi tylko o pierwszy najazd... Brak animacji.

[Kemsan]

@LostHighway: http://codepen.io/anon/pen/QjVRNJ

[Kemsan]

@LostHighway: Dodatkowo tu masz przykład tego co zapewne chcesz osiągnąć, więcej js'a niż cssa.

[LostHighway]

@Kemsan: Dzięki za zainteresowanie ale właśnie w tym problem, dołożenie `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...

[LostHighway]

@Kemsan: Problem rozwiązany tak: Zamiast używać `:hover posłużyłem się .hover a 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.