189
Help us understand the problem. What are the problem?

More than 5 years have passed since last update.

posted at

updated at

display: none; のDOMに対してtransitionを使う際の注意

例えば、初期状態で

display: none;
opacity: 0;

としてあるDOMを、あるイベントによって

display: block;

にすると同時にopacityを1へとアニメーションしたい場合。
それをcssのtransitionを使って実現しようとすると、

css:

.hoge{
    display: none;
    opacity: 0;
    transition: opacity 1s linear 0s;
}

.hoge.show{
    display: block;
    opacity: 1;
}

と直感的に書いてしまいがちであるが、これではうまく動かない。
なぜならshowがクラス名として付与された時点で初めて

display: block;

となり、このタイミングでDOMが生成されているため。
従って、display: none; 状態のときの

opacity: 0;

というプロパティはtransitionのスタート値とはならず、 0 -> 1 へのアニメーションは走らない。

上記の仕様を実現するには、cssのanimationを使うと良い。

@keyframes show{
    from{
        opacity: 0;
    }
    to{
        opacity: 1;
    }
}

.hoge{
    display: none;
}

.hoge.show{
    display: block;
    animation: show 1s linear 0s;
}

※ベンダープレフィックスは割愛

Register as a new user and use Qiita more conveniently

  1. You can follow users and tags
  2. you can stock useful information
  3. You can make editorial suggestions for articles
What you can do with signing up
189
Help us understand the problem. What are the problem?