38

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

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

4

4 に答える 4

92

最近の 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>

于 2016-09-23T21:38:04.023 に答える
16

OK、まず、 を使用して div を作成するときにどのように機能するかがわからない(document.createElement('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があります

于 2012-07-27T06:49:03.133 に答える
11

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

div {
  opacity:0;
  transition:opacity 1s linear;*
}
div.SomeClass {
  opacity:1;
}
于 2012-07-26T00:33:51.240 に答える