CSSトランジションがフェードイン

Question

これまではCSSトランジションを使用していましたが、このケースではユニークなケースがあります。私はモーダルを作成するためのカスタムプラグインを書いています。基本的に私は飛んでdivを作成document.createElement('div')といくつかのクラスで体に追加します。これらのクラスは、色と不透明度を定義します。このdivをフェードインできるように厳密にCSSを使用したいと思いますが、状態の変更を行うのは困難です。

は、私はあなたを信じて、それが状態変化を小文字望んいくつかの高度なセレクタを試みた状態を変えることを望んでメディアクエリーを試してみました...任意のアイデアや提案を探して、私は本当にCSSでこれを維持したいことも可能

Answer 1

場合要素にクラスを追加できます。しかし、どちらの方法は、最初にすべての私は、あなたが(document.createElement('div'))を使用してのdivを作成するときに、それがどのように動作するかわからないんだけど、

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

Answer 2

OKのjQueryやREG JSを使用する必要があると思いますので、私は今、間違っているかもしれませんが、wouldnこのために：target疑似クラスセレクタを使うことは可能でしょうか？

divをターゲットにするためにリンクを使用していますが、あなたの場合は#newを代わりにスクリプトからターゲティングすることが可能ですユーザーの介入なしにフェードインするか、間違っていると思いますか？ここで

は私の例のコードです：

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

...と、ここにjsFiddle

Answer 3

CSSキーフレームのサポートはかなり良い、これらの日ですです：

私は質問が正しい理解すればわからない

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