CSS geçişi,

Question

'da kayboldu. Bu yüzden daha önce CSS geçişlerini kullandım ama bununla ilgili benzersiz bir durumum var. Model oluşturmak için özel bir eklenti yazıyorum. Esasen, document.createElement('div') no'lu uçta bir div yaratıyorum ve onu birkaç sınıfa kadar vücuda ekliyorum. Bu sınıflar renk ve opaklığı tanımlar. Bu div içinde solmaya muktedir olmak için kesinlikle CSS kullanmak istiyorum, ancak durum değişikliğini zorlaştırıyor, bazı kullanıcı etkileşimi gerektiriyor.

herhangi bir fikir ve öneri aranıyor, gerçekten sana inanıyorum mümkün

Answer 1

CSS'de bu tutmak istiyorum devlet ... değiştirmeyi umuyor Medya sorgusunun denedik, bir durum değişikliği harf umuduyla bazı gelişmiş seçicileri çalıştı öğe için addClass olabilir. Ama ne olursa olsun sen her şeyden önce sana (document.createElement('div')) kullanarak bir div oluştururken nasıl çalıştığını emin değilim

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

Answer 2

Tamam jQuery veya reg JS kullanmak zorunda kalacak, ben şimdi yanlış olabilir, ama etmezdim Bunun için hedef pseudo sınıf seçiciyi kullanmak mümkün mü?

Aşağıdaki kodya bakarsanız, div'u hedeflemek için bir bağlantı kullandığımı fark edebilirsiniz, ancak sizin durumunuzda, betik yerine # new hedeflemek mümkün olabilir ve bu şekilde div kullanıcı etkileşimi olmadan kaybolur mu, yoksa yanlış mı düşünüyorum? İşte

benim örneğin kod:

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

... ve burada bir jsFiddle

Answer 3

CSS Ana kareler desteği oldukça iyi bugünlerde bulunuyor :

i soru doğru anlarsanız Emin değilim

.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>