display:block;をtransitionっぽく制御してみました

Css

ここのブログのテンプレートはZinnias Liteというテンプレートを使用していて、個人的に結構気に入っているのですが一点だけ気になったとこがありまして…。
ページ上部のナビゲーションの階層が、ホバー時に一瞬で表示されて、ホバーが外れたらまた一瞬で消えてしまってたんですね。
ソースを見たら、display:block;とnone;で制御されていました。

是非これはtransitionでフェードインさせたいなーと思ってポチポチいじっていたのですが、恥ずかしながら知らなかったことがありました。

display:block;で制御している場合、transitonが効かないということ

いや全くお恥ずかしい限りで…。

なので色々Google先生にお世話になりながら実装したのがコチラ ↓

CSS


    .cat-menu .sub-menu,
    .cat-menu .children {
        visibility: hidden;
        opacity: 0;
        transition: .3s linear;
    }

    ul.cat-menu li:hover > ul,
    .cat-menu li:hover > ul {
        visibility: visible;
        opacity: 1;
    }


display:block;では制御できないとのことなので、hiddenでなんとかやってみました。
本当はパラパラ上から降りてくるようなエフェクトにしたかったのですが、もう少し勉強してからまた更新してみます。。。。

css3になってからそれなりの時間が経っているのですが、transitionやanimateとかまだまだ理解しきっていないプロパティがあるのであかんですね。中途半端な知識のまま止まってしまっている…。
これからもっともっと勉強していきたいと思います!

コメント