Fundido de transición CSS en

Question

Así que he usado transiciones CSS antes, pero tengo un caso único con este. Estoy escribiendo un complemento personalizado para crear modales. Básicamente creo un div sobre la marcha document.createElement('div') y lo agrego al cuerpo con algunas clases. Estas clases definen el color y la opacidad. Me gustaría usar estrictamente CSS para poder desvanecerme en este div, pero hacer que el cambio de estado parezca difícil porque requieren cierta interacción del usuario.

probado algunos selectores avanzados esperanza de que caso de que un cambio de estado, tratado consulta de medios con la esperanza de cambiar de estado ... en busca de todas las ideas y sugerencias, realmente quiero tener esto en CSS si es posible

Answer 1

te creo podría agregarClass al elemento. Pero en cualquier caso, tendría que usar jQuery o reg JS

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

Answer 2

bien, en primer lugar, no estoy seguro de cómo funciona cuando se crea un div usando (document.createElement('div')), por lo que podría estar mal ahora, pero wouldn ¿No se puede usar el selector de pseudo clase objetivo para esto?

Si mira el código siguiente, puede ver He utilizado un enlace para segmentar el div, pero en su caso podría ser posible segmentar #new del script en su lugar y hacer que el div desvanecerse sin la interacción del usuario, o estoy pensando mal?

Aquí está el código para mi ejemplo:

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; 
} 

... y aquí es un soporte jsFiddle

Answer 3

CSS fotogramas clave es bastante bueno en estos días :

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

 
@keyframes fadeInOpacity { 
 
\t 0% { 
 
\t \t opacity: 0; 
 
\t } 
 
\t 100% { 
 
\t \t opacity: 1; 
 
\t } 
 
}

<h1 class="fade-in">Fade Me Down Scotty</h1>