Transition CSS sur un masqué initialement elemement

Je voudrais faire une transition css sur un élément qui a display: none ensemble. Considérons le code suivant:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>CSS Transition From Hidden</title>

        <style type="text/css">
            div {
                -webkit-transition-property: all;
                -webkit-transition-duration: 2s;
            }       

            div.hidden {
                display: none;
                opacity: 0;
            }    

            div.from {
                opacity: 0;
            }
        </style>     

        <script type="text/javascript">
            function loaded() {
                var e = document.getElementById("foo");
                e.className = "from";
                window.webkitRequestAnimationFrame(function(t) {
                    e.className = null;
                });
            }
        </script>
    </head>
    <body onload="loaded()">
        <div id="foo" class="hidden">
            My test div
        </div>
    </body>
</html>

Je voudrais aller de class="div.hidden" à class="", c'est à dire à partir de display: none; opacity: 0; à display: block; opacity: 1; Cependant, en chrome (au moins) un objet qui a display: none ne pas les animer. L'élément va à la fin de l'état immédiatement.

Mon travail autour de ce problème consiste à définir l'élément à display: block; opacity: 0; et ensuite faire la transition dans l'image suivante (à l'aide de requestAnimationFrame(). Il est un peu maladroite, et je ne trouve aucune explication pour ce comportement dans le spec. Je sais que je pourrais utiliser le visibility-attribut, mais je ne veux pas l'utiliser parce que je ne veux pas à la disposition de l'élément masqué.

Donc, les questions sont: Est-ce le bon comportement ou un bug? Si c'est le bon comportement, est-il une meilleure façon d'écrire le code? Notez que je ne suis pas de demander s'il y a des bibliothèques qui peuvent le faire, je veux savoir si il ya une meilleure façon de le faire directement sur le DOM.

OriginalL'auteur Tobias Ritzau | 2012-11-19

Concernant la question sur si c'est dans les spécifications, il y a un fil intéressant sur le [email protected] liste ici. Je n'ai pas tout lu, mais il semble qu'ils ne commencent pas d'animations à partir de none et que la transition spec doit préciser que.

Mise à jour: j'ai demandé à la liste de courrier et j'ai eu ce lien pour la minutes d'un groupe de travail de la réunion où il a été décidé qu'il devrait y avoir pas de transition si l'état de départ est display: none.

Pour s'assurer que la transition est faite, vous devez vous assurer que la valeur de la propriété animée est calculé avant qu'il est défini à sa nouvelle cible. Les valeurs sont normalement pas calculé lorsque l'affichage est défini sur aucun. Voici un exemple de travail:

<!DOCTYPE HTML>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">

    <title>Fade</title>

    <style>
      .hidden { display: none }
      .start { opacity: 0 }
      .transition { opacity: 1; -webkit-transition: opacity 1s }
    </style>
  </head>
  <body>
    <div id='div' class="hidden">Test</div>

    <script>
      var elem = document.getElementById('div');

      function ontransitionend(event) {
        elem.className = null;
        elem.removeEventListener('transitionend', ontransitionend);
      }
      elem.addEventListener('transitionend', ontransitionend);

      elem.className = 'start';
      window.getComputedStyle(elem).opacity;
      elem.className = 'transition';
    </script>
  </body>
</html>

Notez que vous devez accéder à la propriété d'opacité. Il ne suffit pas d'appeler getComputedStyle()!

OriginalL'auteur Tobias Ritzau

2

Vous ne devriez pas nécessairement relais sur transitionend rappels.

Pour montrer avec un passage sur la propriété d'opacité (ou autres) un élément masqué qui a d'abord display:none, il suffit d'utiliser de style en ligne pour définir display:block alors retirer votre classe CSS .hidden pour animer l'élément que vous voulez:

CSS:
```
#foo {
    display: none;
    opacity: 1;
    /*optional, other ending properties...*/
    transition: opacity 1s;
}
.hidden {
    opacity: 0;
    /*optional, other starting properties...*/
}
```
HTML:
```
<div id="foo" class="hidden">
    My test div
</div>
```
enfin, la partie javascript pour afficher l'élément avec une transition:
```
var elem = document.getElementById('foo');
elem.style.display = 'block';
elem.classList.remove('hidden');
```
OriginalL'auteur guari
1

Il y a plusieurs propriétés css qui ne peut être incrémentée par petites étapes (qu'est-ce que la valeur de display 25% de la voie entre none et block?), en particulier ceux qui ont des valeurs numériques. La solution de contournement que vous décrivez est assez beaucoup la façon habituelle de traiter cette question. jQuery, par exemple, utilise quelque chose de semblable dans ses fadeIn et fadeOut méthodes.

Si vous souhaitez animer la transition de l'prenant pas de place à la mise en page standard, vous pouvez passer au height et width propriétés.

Je ne dis pas qu'il devrait y avoir de l'animation sur le display de la propriété. Je suis display à bloc et (dans ce cas) la opacity est changé. C'est la façon dont les transitions de travail. Les caractéristiques de votre liste dans transition-property sont animées, le reste sont réglés immédiatement. Pourquoi est-ce différent pour display?
Non, il n'est pas que je n'en veux pas de ne pas prendre de l'espace. Il devrait prendre très peu de temps. Et les éléments cachés peuvent être très nombreux et complexes (diaporama).
Voulez-vous dire que l'opacité est définie immédiatement?
Oui, au lieu de 2s fondu, l'opacité est définie sur 1 directement.
Si vous supprimez le display:none et utiliser exactement le même code que pour l'opacité, cela fonctionne t'il correctement?

OriginalL'auteur Asad Saeeduddin
1

le display: none signifie que vous pourriez atteindre l'élément, mais d'abord vous devez vous assurer que
l'élément a été rendue .
vous pouvez utiliser la fonction, prête en jquery ou implemente en javascript pour s'assurer que l'élément est-il .
vous pourriez le faire ci-dessus à l'aide de : javascript(utilisation de la minuterie d'augmenter l'opacité) ou jquery comme ci-dessous
```
<html>
    <head>
        <meta charset="utf-8">
        <title>CSS Transition From Hidden</title>

    <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
    <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
        <style type="text/css">

            div.hidden {
                display: none;
                opacity: 0;
            }    

                    </style>     

        <script type="text/javascript">
$.ready = function () {

                $("#foo").fadeIn(2000);

            }
        </script>
    </head>
    <body>
        <div id="foo" class="hidden">
            My test div
        </div>
    </body>
</html>
```
L'élément est-il. Ce n'est pas la question. Sûr que je peux utiliser des bibliothèques, mais je me demande si il ya une meilleure façon de l'appliquer directement sur les DOM. Je vais préciser que dans la question.
oui , vous pouvez créer de la minuterie en javascript pour augmenter l'opacité
Mais, comment est-ce mieux? (La compatibilité n'est pas un problème dans ce cas)
oui , son Compatibile comme nous allons modifier la classe de la div à l'intérieur de la minuterie
Ce n'est pas la façon dont vous utilisez jQuery prêt (c'est une fonction, pas une propriété). Et ce n'est pas en utilisant les transitions CSS.

OriginalL'auteur Athamneh
1

J'ai le même problème et je ne pense pas qu'il devrait être considéré comme un comportement acceptable par les navigateurs. Le problème n'est pas que quelqu'un essaie d'animer l'affichage réel de propriété. De son que vous ne pouvez pas avoir un élément avec display: none, mise à jour de la propriété inline ou quoi que ce soit et puis d'animer l'opacité par exemple, même si vous mettez un délai de 10 secondes après l'affichage a été mis à jour.

Ma solution maintenant est de mettre de la largeur et de la hauteur à 0, le débordement de la cacher, la mise à jour de ces valeurs et ENSUITE mettre à jour les attributs d'animation. Au moins, il se comporte de plus en plus semblables à afficher aucun rapport à la visibilité caché.

OriginalL'auteur Anjuna5
0

display:none crics de l'animation. C'est une honte et je pense doit être adressée par les navigateurs. J'ai contourné le problème en définissant un z-index à -1, ce qui masque l'élément, et si c'est bien placé aussi le supprime de la statique de la mise en page. Vous pouvez réellement transition z-index (s'il n'est pas vraiment ressembler à animer), donc ne pas gâcher l'opacité de l'animation.

Cela a fonctionné pour moi sur ma demande, bien que j'ai finalement dû utiliser JavaScript pour aller de l'avant et régler l'affichage de la propriété d'aucun bloc parce que j'ai finalement nécessaires à l'utilisation de la disparition de l'élément dans un overflow:auto élément qui, quand elle n'était pas cachée, créé des barres de défilement en indésirable fois.

Merci pour votre réponse. Bien sûr, il existe des solutions de contournement (comme celle que j'ai posté), ce que je voudrais savoir c'est si ce n'est conformément à spec (m'indiquer où), et je suis à la recherche pour le plus agréable des façons de la mettre en œuvre. Je suppose que négatif de z-index fonctionne, puisque l'élément est placé derrière le corps, ou? De toute façon, je ne vois pas comment cela aide. Le code que j'ai posté fonctionne, mais c'est bizarre si c'est la façon dont il devrait être mis en œuvre :S je n'ai tout simplement pas comprendre pourquoi on ne peut pas animer de "display: none"

OriginalL'auteur Ben

Vous devez vous connecter pour publier un commentaire.