web-dev-qa-db-ja.com

CSS遷移のフェードイン

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

状態が変化することを期待していくつかの高度なセレクタを試し、状態を変更することを望んでメディアクエリを試みました...アイデアや提案を探して、可能であればCSSでこれを維持したい

csscss3css-transitions
18
afreeland

CSSキーフレームのサポートは最近非常に優れています。

.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、まず、(document.createElement('div'))を使用してdivを作成するときの動作がわからないので、今は間違っているかもしれませんが、これに：target疑似クラスセレクターを使用することはできませんか？

以下のコードを見ると、リンクを使用してdivをターゲットにしたことができますが、あなたの場合は＃new代わりにスクリプトから、ユーザーの操作なしでdivをフェードインさせますか、それとも間違っていると思いますか？

これが私の例のコードです：

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

8
Christofer Vilander

要素にClassを追加できると思います。しかし、どちらの方法でも、Jqueryまたはreg JSを使用する必要があります。

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