LoginSignup
4
4

More than 5 years have passed since last update.

OSX のメニュー風にフェードアウトさせながら要素を非表示にする

Last updated at Posted at 2015-10-20

普段あまり気にしないけど、 OSX のメニューは、表示されるときはアニメーションなしで、非表示になるときはフェードアウトしながら消える。

10月 20, 2015 22:22.gif

Web 上でもこの雰囲気を再現したくて、 CSS transition でやってみようと思ったんだけど、以下のコードだとアニメーションしない。

.menu {
    transition: none;

    &.hidden {
      display: none;
      opacity: 0;

      transition:
        display 0s linear 0.3s,
        opacity 0.3s ease 0s;
    }
}

実は display プロパティは transition に指定できないので、代わりに visibility を使ってやる必要がある。

.menu {
    transition: none;

    &.hidden {
      visibility: hidden;
      opacity: 0;

      transition:
        visibility 0s linear 0.3s,
        opacity 0.3s ease 0s;
    }
}
4
4
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4
4