クラスが削除されたときに背景の不透明度が0に遷移しない

Question

私のサイトには、必要なときにいつでも開く背景があります。モーダル、モバイルナビなど

背景の不透明度を消したいのですが、背景から--openクラスを削除すると、適切に遷移することができません。

私はいくつかの繰り返しを行ってきたので、どのように動作させ、より良いCSSにするかについてのアイデアがありがたいです。

--openがバックグラウンドに適用されたときに発生するイージーエフェクトをデモンストレーションしますが、削除すると機能しません。

.backdrop { 
    position: fixed; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 0; 
    z-index: -9999999999; 
    opacity: 0; 
    text-align: center; 

    transition: opacity 0.3s ease-in; 

} 

.backdrop--open { 
    opacity: 0.75; 
    z-index: 2; 
    background: #000; 

    transition: opacity 0.4s ease-out; 
} 

Answer 1

問題は、あなたが、背景は要素.backdrop--openに設定された初期.backdrop状態に設定されたバックグラウンドを持っていないということです：先物便宜上

https://jsfiddle.net/p2yz0rvr/

はここのコードです。

opacityプロパティを移行するだけなので、.backdrop--openクラスを削除すると、移行は行われません。したがって、クラスを削除するときに遷移が行われるように、背景を最初の.backdrop状態に移動する必要があります。代替案として

Updated Example

.backdrop { 
    position: fixed; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 0; 
    z-index: -1; 
    opacity: 0; 
    text-align: center; 
    background: #000; 
    transition: opacity 0.3s ease-in; 
} 

.backdrop--open { 
    opacity: 0.75; 
    z-index: 2; 
    transition: opacity 0.4s ease-out; 
} 

---

、また、あなたの最初のコードを維持し、ちょうど（背景が設定されている場所を変更することなく）opacityプロパティに加えて、backgroundプロパティを移行することができます。

z-indexプロパティは移行することができます。達成しようとしているものによっては、allではなく2つのプロパティを対象にすることができます。理にかなって

Updated Example

.backdrop { 
    /* ... */ 
    transition: background 0.3s ease-in, opacity 0.3s ease-in; 
} 

.backdrop--open { 
    /* ... */ 
    background: #000; 
    transition: background 0.4s ease-out, opacity 0.4s ease-out; 
}