Skip to content
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
Merged

Conversation

@ffoodd
Copy link
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.

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
Copy link
Contributor Author

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
Copy link
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
Copy link
Contributor Author

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
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
Copy link
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
Copy link
Contributor Author

ffoodd commented Jan 28, 2016

Génial :)

@nico3333fr
Copy link
Owner

nico3333fr commented Jan 28, 2016

Merci à toi surtout :)

@ffoodd
Copy link
Contributor Author

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
Copy link
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
Copy link
Contributor Author

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
Copy link
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
Projects
None yet
Linked issues

Successfully merging this pull request may close these issues.

None yet

2 participants
You can’t perform that action at this time.