[CSS/JS] Na transition nieuwe positie behouden

[TheNephilim]

In plaats van animate in jQuery, kun je beter gebruik maken van transition in CSS. In Bootstrap vind je in de carousel wel een mooi voorbeeld, daar heb ik al wat 'inspiratie' van gekregen om een prototype te maken.

http://getbootstrap.com/javascript/#carousel
https://github.com/twbs/b...master/less/carousel.less
https://github.com/twbs/bootstrap/blob/master/js/carousel.js

De slider ziet er zo uit:

[left][...active...][right]

Van de linker en rechter slide zie je slechts een klein stukje en komen, door er op te klikken, in beeld. Het sliden heb ik nu voor elkaar en middels het transitionend event kan ik bepalen wanneer de transition klaar is. Echter moeten de slides op hun plek blijven staan na de transition, net zoals in het Bootstrap voorbeeld.

JSFiddle: http://jsfiddle.net/53pfw2k1/ (klik op de groene slide)

Wat mis ik hier; hoe kan ik zorgen dat hij van transform: translate3d(-100%, 0, 0); niet weer terug gaat als de class .to-left weggehaald word. De Bootstrap carousel doet het ook niet, maar ik kan maar niet vinden waarom.

[Jorik90]

Al je magie met classes maakt het er niet duidelijker op. Als je "transition: transform 0.8s ease-in-out;" van .item afhaalt en op .item.to_left en .item.to_right plaatst dan gaat het wel goed qua effect. Je vakje krijgt een andere kleur doordat je een andere class erop zet, die een andere kleur heeft.

[MarcoC]

Ik denk dat je goed moet snappen hoe de carousel werkt die je probeert na te bouwen. Volgens mij werkt het ongeveer zo:
1. Alle slides liggen op elkaar, en niet naast elkaar. De actieve slide heeft display: block, de rest display: none.
2. Op het moment dat je naar de volgende slide wilt, wordt de volgende slide naast de actieve slide geplaatst d.m.v. van de volgende code:

code:

.carousel-inner>.next {
    left: 100%
}

.carousel-inner>.prev {
    left: -100%
}

Let op: alleen de transform-property heeft een animatie, dus dit is nog niet niet wat de animatie teweeg brengt.

3. Zodra de volgende slide naast de huidige slide gepositioneerd is, wordt de huidige slide weggeschoven door middel van transform: translate3d(-100%, 0, 0);. De class active wordt verwijderd waardoor dit DOM-element niet meer zichtbaar is na de transitie.

Dit beantwoordt jouw vraag waarom het jou niet lukt ervoor te zorgen dat de slide niet weer teruggaat als je de class .to-left verwijdert. Dat komt omdat het niet nodig is om de transformatie te bewaren. Immers, het enige dat uiteindelijk verandert is welke slide de class "active" heeft en dus zichtbaar is. De transform is alleen voor de animatie.

[TheNephilim]

Jorik90 schreef op woensdag 24 december 2014 @ 12:00:
Al je magie met classes maakt het er niet duidelijker op. Als je "transition: transform 0.8s ease-in-out;" van .item afhaalt en op .item.to_left en .item.to_right plaatst dan gaat het wel goed qua effect. Je vakje krijgt een andere kleur doordat je een andere class erop zet, die een andere kleur heeft.

Nee dat kan inderdaad wat netter dat is waar. Maar ik heb je suggestie geprobeerd (in de fiddle), maar dat maakt geen verschil. Na het animeren schuift de slide weer naar rechts.

MarcoC schreef op woensdag 24 december 2014 @ 12:53:
Ik denk dat je goed moet snappen hoe de carousel werkt die je probeert na te bouwen. Volgens mij werkt het ongeveer zo:
1. Alle slides liggen op elkaar, en niet naast elkaar. De actieve slide heeft display: block, de rest display: none.
2. Op het moment dat je naar de volgende slide wilt, wordt de volgende slide naast de actieve slide geplaatst d.m.v. van de volgende code:

code:

.carousel-inner>.next {
    left: 100%
}

.carousel-inner>.prev {
    left: -100%
}

Let op: alleen de transform-property heeft een animatie, dus dit is nog niet niet wat de animatie teweeg brengt.

3. Zodra de volgende slide naast de huidige slide gepositioneerd is, wordt de huidige slide weggeschoven door middel van transform: translate3d(-100%, 0, 0);. De class active wordt verwijderd waardoor dit DOM-element niet meer zichtbaar is na de transitie.

Dit beantwoordt jouw vraag waarom het jou niet lukt ervoor te zorgen dat de slide niet weer teruggaat als je de class .to-left verwijdert. Dat komt omdat het niet nodig is om de transformatie te bewaren. Immers, het enige dat uiteindelijk verandert is welke slide de class "active" heeft en dus zichtbaar is. De transform is alleen voor de animatie.

Nou ik probeer de slide niet na te bouwen, ik heb alleen gekeken naar de principes die er gebruikt worden en probeer die deels toe te passen.

1. In mijn versie wil ik graag de 'actieve' slide in de container laten zien en links en rechts een stukje van de andere slides.

2. Transform zou sneller moeten zijn dan left. Met left bepaal ik de initiële positie van de 3 slides.

3. Hmmm, ja ik snap wat je bedoelt, dat is inderdaad het probleem.

Maar wat is de oplossing? Of toch weer terug vallen op jQuery animaties?

--- Edit ---

@Jorik90: Na nog even verder geknutseld te hebben, kwam ik erachter dat jou oplossing toch werkte! Naast wat andere aanpassingen zorgt dat ervoor dat hij niet weer terug gaat naar z'n oude positie.

Danku!

[ Voor 4% gewijzigd door TheNephilim op 06-01-2015 11:41 ]

[Verwijderd]

CSS animaties zijn leuk om simpele animaties te maken, echter als je hele user interfaces gaat animeren en zulke problemen krijgt kan je beter terugvallen naar JS animatie. Animatie libraries als Velocity en Greensock's Tweenlite/max zijn vrijwel niet trager, [url="[url]http://davidwalsh.name/css-js-animation[/url]"]soms misschien zelfs sneller[/url].

[TheNephilim]

Verwijderd schreef op dinsdag 06 januari 2015 @ 16:41:
CSS animaties zijn leuk om simpele animaties te maken, echter als je hele user interfaces gaat animeren en zulke problemen krijgt kan je beter terugvallen naar JS animatie. Animatie libraries als Velocity en Greensock's Tweenlite/max zijn vrijwel niet trager, [url="[url]http://davidwalsh.name/css-js-animation[/url]"]soms misschien zelfs sneller[/url].

Mwah, echt een animatie kun je dit niet noemen denk ik. Sliden naar links of rechts, meer is het niet. Ik heb het inmiddels perfect voor elkaar, nog even wat verschillende browsers testen, maar meer niet.

[MoietyMe]

Verwijderd schreef op dinsdag 06 januari 2015 @ 16:41:
CSS animaties zijn leuk om simpele animaties te maken, echter als je hele user interfaces gaat animeren en zulke problemen krijgt kan je beter terugvallen naar JS animatie. Animatie libraries als Velocity en Greensock's Tweenlite/max zijn vrijwel niet trager, [url="[url]http://davidwalsh.name/css-js-animation[/url]"]soms misschien zelfs sneller[/url].

Ben nog maar weinig situaties tegengekomen waren JS library nodig was voor een animatie.

[Verwijderd]

Good Fella schreef op vrijdag 09 januari 2015 @ 13:18:
[...]

Ben nog maar weinig situaties tegengekomen waren JS library nodig was voor een animatie.

Het komt bij animatie-heavy websites nog wel eens voor dat je bepaalde JS functionaliteit pas wilt starten wanneer een animatie klaar is. Zijn wel mogelijkheden om callbacks te krijgen wanneer een CSS animatie klaar is, maar die zijn niet bijzonder browser compatible. En aangezien de performance toch niet veel verschilt, is het helemaal niet zo gek om je animatie met JS te doen.

Begrijp me niet verkeerd though, als ik website maak zonder animaties die callbacks moeten hebben, gebruik ik liever CSS puur omdat het simpeler is

[MoietyMe]

Verwijderd schreef op vrijdag 09 januari 2015 @ 17:15:
[...]


Het komt bij animatie-heavy websites nog wel eens voor dat je bepaalde JS functionaliteit pas wilt starten wanneer een animatie klaar is. Zijn wel mogelijkheden om callbacks te krijgen wanneer een CSS animatie klaar is, maar die zijn niet bijzonder browser compatible. En aangezien de performance toch niet veel verschilt, is het helemaal niet zo gek om je animatie met JS te doen.

Begrijp me niet verkeerd though, als ik website maak zonder animaties die callbacks moeten hebben, gebruik ik liever CSS puur omdat het simpeler is

Ik dacht dat animationend overal wel werkte? Wellicht met wat prefixes voor deze of gene, maar volgens mij ging dat best soepel?

[R4gnax]

Good Fella schreef op vrijdag 09 januari 2015 @ 17:58:
[...]

Ik dacht dat animationend overal wel werkte? Wellicht met wat prefixes voor deze of gene, maar volgens mij ging dat best soepel?

Oudere Android browser en Safari versies ondersteunen wel CSS animaties maar niet het animationend event; ook niet met een webkit prefix.