effects - Jqueryを使用しないJavascriptのスライド効果

Question

私は自分のライブラリに取り組んでおり、スライド効果機能が役立つと考えていました。さらに、カレンダー/時計の Web アプリを作成しており、その目標は可能な限り効果に満ちたものにすることです。今のところやることはありません。ごめん。私はウェブ全体を検索しました。

Answer 1

テキストをスライドインまたはスライドアウトさせようとしている場合は、CSS が最も効率的です。for ループで Javascript の setTimeout メソッドを使用することもできますが、CSS アニメーションが最も滑らかに見えます。ここで JSFiddle を作成しました。

その背後にある CSS は次のとおりです。

div.slide {
    transition: left, 2s;
    -moz-transition: left, 2s;
    -webkit-transition: left, 2s;
    -ms-transition: left, 2s;
    position:relative;
    left:-150px;
    border: solid black 2px;
    width:50px;
}
div.hov {
    border:solid black 2px;
    position:absolute;
    width:100px;
}
div.hov:hover div.slide {
    left:48px;
}

「カレンダー」を強調表示して、効果を確認します。