New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add an option useful when animating #9

Merged
merged 1 commit into from Jan 28, 2016

Conversation

Projects
None yet
2 participants
@ffoodd
Contributor

ffoodd commented Dec 21, 2015

When animating the hide/show system, if hidden content is very large we'll see it disappear on first load (due to max-height transitionning).

This code needs a .js-first_load class on .js-to_expand in HTML. Applying

.js-first_load {
  display: none;
}

will prevent the block to be drawn and then disappear (it won't be displayed at all). When the script is initializing, we already add a class on the .js-to_expand, so I just hooked on and remove the new .js-first_load class after 300 ms(which is my transition-durationvalue). This value will ensure that no transition will be seen when loading the page.

What's your opinion on this?

It does work for me but I may have missed a point.

Add an option useful when animating
When animating the hide/show system, if hidden content is very large we'll see it disappear on first load (due to `max-height` transitionning).

This code needs a `.js-first_load` class on `.js-to_expand` in `HTML`. Applying 
```
.js-first_load {
  display: none;
}
``` 
will prevent the block to be drawn and then disappear (it won't be displayed at all). When the script is initializing, we already add a class on the `.js-to_expand`, so I just hooked on and remove the new `.js-first_load` class after `300 ms`(which is my `transition-duration`value). This value will ensure that no transition will be seen when loading the page.

What's your opinion on this?

It does work for me but I may have missed a point.
@ffoodd

This comment has been minimized.

Show comment
Hide comment
@ffoodd

ffoodd Dec 21, 2015

Contributor

Et je peux la refaire en Français si c'était pas clair (づ º ᴥ º )づ

Lien utile : https://gist.github.com/randyjensen/6223653

Contributor

ffoodd commented Dec 21, 2015

Et je peux la refaire en Français si c'était pas clair (づ º ᴥ º )づ

Lien utile : https://gist.github.com/randyjensen/6223653

@nico3333fr

This comment has been minimized.

Show comment
Hide comment
@nico3333fr

nico3333fr Jan 23, 2016

Owner

Yop,

je viens de tomber là-dessus, j'avais honteusement oublié d'y regarder. Tu aurais un exemple, j'ai jamais vu ce phénomène ?

Au plaisir,
Nico

Owner

nico3333fr commented Jan 23, 2016

Yop,

je viens de tomber là-dessus, j'avais honteusement oublié d'y regarder. Tu aurais un exemple, j'ai jamais vu ce phénomène ?

Au plaisir,
Nico

@ffoodd

This comment has been minimized.

Show comment
Hide comment
@ffoodd

ffoodd Jan 25, 2016

Contributor

La page sur laquelle j'ai rencontré le cas n'est déjà plus en ligne malheureusement. Rétrospectivement, je pense que c'était un cas particulier : une dizaine de hide/show sur la même page, avec des contenus très importants. Le DOM était probablement un peu long à charger, d'ou ce cas particulier.

Je suppose que c'est reproductible dans ces conditions :

  • une dizaine ou quinzaine de hide/show avec le bonus animation ;
  • les éléments masquables remplis avec un DOM un peu violent (genre plein de paragraphes, avec plein de types de balises, des images, ce genre de saleté) ;
  • et un bon vidage de cache :D
  • en bonux, tu peux simuler une connexion de merde via ton inspecteur favori.

Normalement ça devrait être visible…

En l'occurrence ma PR permet d'éviter ce cas à moindre coût — mais ça n'est pas indispensable au projet, d'ou la simple PR ;)

Contributor

ffoodd commented Jan 25, 2016

La page sur laquelle j'ai rencontré le cas n'est déjà plus en ligne malheureusement. Rétrospectivement, je pense que c'était un cas particulier : une dizaine de hide/show sur la même page, avec des contenus très importants. Le DOM était probablement un peu long à charger, d'ou ce cas particulier.

Je suppose que c'est reproductible dans ces conditions :

  • une dizaine ou quinzaine de hide/show avec le bonus animation ;
  • les éléments masquables remplis avec un DOM un peu violent (genre plein de paragraphes, avec plein de types de balises, des images, ce genre de saleté) ;
  • et un bon vidage de cache :D
  • en bonux, tu peux simuler une connexion de merde via ton inspecteur favori.

Normalement ça devrait être visible…

En l'occurrence ma PR permet d'éviter ce cas à moindre coût — mais ça n'est pas indispensable au projet, d'ou la simple PR ;)

nico3333fr added a commit that referenced this pull request Jan 28, 2016

Merge pull request #9 from ffoodd/patch-1
Add an option useful when animating (delay for very slow pages/big DOMs)

@nico3333fr nico3333fr merged commit 0676058 into nico3333fr:master Jan 28, 2016

@nico3333fr

This comment has been minimized.

Show comment
Hide comment
@nico3333fr

nico3333fr Jan 28, 2016

Owner

Ça y est, j'ai eu le temps de m'y pencher, et tout à fait d'accord sur l'idée.

J'ai juste repassé ça en paramètre, afin d'être plus propre. ;)

Owner

nico3333fr commented Jan 28, 2016

Ça y est, j'ai eu le temps de m'y pencher, et tout à fait d'accord sur l'idée.

J'ai juste repassé ça en paramètre, afin d'être plus propre. ;)

@ffoodd

This comment has been minimized.

Show comment
Hide comment
@ffoodd

ffoodd Jan 28, 2016

Contributor

Génial :)

Contributor

ffoodd commented Jan 28, 2016

Génial :)

@nico3333fr

This comment has been minimized.

Show comment
Hide comment
@nico3333fr

nico3333fr Jan 28, 2016

Owner

Merci à toi surtout :)

Owner

nico3333fr commented Jan 28, 2016

Merci à toi surtout :)

@ffoodd

This comment has been minimized.

Show comment
Hide comment
@ffoodd

ffoodd May 4, 2016

Contributor

Hey, je repasse là-dessus et j'ai peut-être mieux :

.js-to_expand:not([aria-labelledby]) {
    display: none;
}

Ainsi tant que le JS n'a pas été exécuté (= aria-labelledby n'a pas été ajouté) on masque l'élément.
C'est dans l'ordre naturel de ton plugin, et on peut se passer du paramètre ajouté dans cette PR.

Qu'en dis-tu ?

Contributor

ffoodd commented May 4, 2016

Hey, je repasse là-dessus et j'ai peut-être mieux :

.js-to_expand:not([aria-labelledby]) {
    display: none;
}

Ainsi tant que le JS n'a pas été exécuté (= aria-labelledby n'a pas été ajouté) on masque l'élément.
C'est dans l'ordre naturel de ton plugin, et on peut se passer du paramètre ajouté dans cette PR.

Qu'en dis-tu ?

@nico3333fr

This comment has been minimized.

Show comment
Hide comment
@nico3333fr

nico3333fr May 8, 2016

Owner

J'y réfléchis, c'est bien vu pour le sélecteur (j'y pense jamais), un souci néanmoins : si le JS pète pour une raison ou une autre, le contenu restera caché. :-\

Owner

nico3333fr commented May 8, 2016

J'y réfléchis, c'est bien vu pour le sélecteur (j'y pense jamais), un souci néanmoins : si le JS pète pour une raison ou une autre, le contenu restera caché. :-\

@ffoodd

This comment has been minimized.

Show comment
Hide comment
@ffoodd

ffoodd May 8, 2016

Contributor

Hum en effet 😐 Ça peut marcher si on a le jeu de classes js/no-js sur html, mais on ne peut pas présumer que ce soit le cas, et ça ne couvrirait même pas tous les cas potentiels d'échecs du script. Dommage ! Je me suis un peu enflammé, merci 😃

Contributor

ffoodd commented May 8, 2016

Hum en effet 😐 Ça peut marcher si on a le jeu de classes js/no-js sur html, mais on ne peut pas présumer que ce soit le cas, et ça ne couvrirait même pas tous les cas potentiels d'échecs du script. Dommage ! Je me suis un peu enflammé, merci 😃

@nico3333fr

This comment has been minimized.

Show comment
Hide comment
@nico3333fr

nico3333fr May 10, 2016

Owner

Ce n'est pas grave, l'idée reste intéressante, je n'avais pas pensé à ce genre de sélecteur, et comme j'utilise modernizr parfois, ça peut servir :)

Owner

nico3333fr commented May 10, 2016

Ce n'est pas grave, l'idée reste intéressante, je n'avais pas pensé à ce genre de sélecteur, et comme j'utilise modernizr parfois, ça peut servir :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment