web-dev-qa-db-fra.com

Transition CSS en fondu

J'ai donc déjà utilisé des transitions CSS mais j'ai un cas unique avec celui-ci. J'écris un plugin personnalisé pour créer des modaux. Essentiellement, je crée un div à la volée document.createElement('div') et je l'ajoute au corps avec quelques classes. Ces classes définissent la couleur et l'opacité. Je voudrais utiliser strictement CSS pour pouvoir disparaître dans cette div, mais faire le changement d'état semble difficile car ils nécessitent une certaine interaction de l'utilisateur.

J'ai essayé des sélecteurs avancés en espérant que cela entraînerait un changement d'état, en essayant une requête média en espérant changer d'état ... à la recherche d'idées et de suggestions, je veux vraiment garder cela en CSS si possible

csscss3css-transitions
18
afreeland

Le support des images clés CSS est assez bon de nos jours:

.fade-in {
        opacity: 1;
        animation-name: fadeInOpacity;
        animation-iteration-count: 1;
        animation-timing-function: ease-in;
        animation-duration: 2s;
}

@keyframes fadeInOpacity {
        0% {
                opacity: 0;
        }
        100% {
                opacity: 1;
        }
}
<h1 class="fade-in">Fade Me Down Scotty</h1>
42
DigitalDesignDj

OK, tout d'abord, je ne sais pas comment cela fonctionne lorsque vous créez un div à l'aide de (document.createElement('div')), donc je peux me tromper maintenant, mais ne serait-il pas possible d'utiliser le sélecteur de pseudo-classe: target pour cela?

Si vous regardez le code ci-dessous, vous pouvez voir que j'ai utilisé un lien pour cibler le div, mais dans votre cas, il pourrait être possible de cibler # new à la place du script et de cette façon faire fondre la div sans interaction de l'utilisateur, ou est-ce que je pense mal?

Voici le code de mon exemple:

HTML

<a href="#new">Click</a> 
<div id="new">
    Fade in ... 
</div>

CSS

#new {
    width: 100px;
    height: 100px;
    border: 1px solid #000000;
    opacity: 0;    
}


#new:target {
    -webkit-transition: opacity 2.0s ease-in;
       -moz-transition: opacity 2.0s ease-in;
         -o-transition: opacity 2.0s ease-in;
                                  opacity: 1;
}

... et voici un jsFiddle

8
Christofer Vilander

Je pense que vous pourriez ajouterClass à l'élément. Mais de toute façon, vous devez utiliser Jquery ou reg JS

div {
  opacity:0;
  transition:opacity 1s linear;*
}
div.SomeClass {
  opacity:1;
}
4
Alex Reynolds