2

サブメニューのアニメーションを作成して、ヒンジのように親メニューの後ろからドロップインしようとしています。最終静止位置を少し過ぎてから戻ってきてほしい。関数表記の私の理解からcubic-bezier()、これは可能であるはずです。バグなのか、単に私の勘違いなのかわかりませんが、うまく動かないようです。すべてのベンダー プレフィックスを削除しました (デモに含まれています) が、使用しているコードは次のとおりです。

HTML

<ul class="nav">
    <li>
        <a href="index.html">Home</a>
    </li>
    <li>
        <a href="about.html">About</a>
        <ul>
            <li>
                <a href="about.html#company">Company</a>
            </li>
            <li>
                <a href="about.html#team">Team</a>
            </li>
        </ul>
    </li>
    <li>
     <a href="contact.html">Contact</a>
    </li>
</ul>

CSS

ul {
    background-color:#99f;
    border-radius:10px;
    list-style:none;
    margin:0;
    padding:0;
}

ul:after {
    clear:both;
    content:'';
    display:block;
    height:0;
    margin:0;
    padding:0;
    width:100%;
}

.nav > li {
    display:block;
    float:left;
    perspective:600px;
    perspective-origin:100% 100%;
    transition:background-color .2s .4s;
}

.nav li a {
    color:#fff;
    display:block;
    padding:20px;
    text-decoration:none;
}

.nav li ul {
    background-color:#bbf;
    border-radius:0 0 10px 10px;
    position:absolute;
    transform:rotateX(-90deg);
    transform-origin:0 0 0;
    transition:transform .4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.nav li:hover {
    background-color:#bbf;
    -webkit-transition-delay:0;
}

.nav li:hover ul {
    transform:rotateX(0);
    transition-delay:.2s;
}

.nav li li {
    white-space:nowrap;
}

ライブデモ

したがって、この MDN 記事の情報に基づいて、Y 軸で 1 より大きい値を持つことができ、バウンス効果が可能になりますcubic-bezier() 。理論的には、これはcubic-bezier()私が使用しているサブメニューを -90 度から約 15 度まで下げてから 0 度に戻す必要があることを意味します。

残念ながら、その動作は見られません。cubic-bezier()タイミング関数をまったく使用しない場合と比較して、アニメーションのタイミングに影響を与えることがわかりますが、期待するバウンス効果は得られません。

-90 度から 0 度を超えることと関係があると思いますが、この時点で非常に迷っています。cubic-bezier()関数で曲線を使用しrotateX()てこのタイプの効果を生成することに関するドキュメントや、この種の回転をサポートしているかどうか、または世界で何が起こっているかを示すドキュメントを見つけることができませんでしrotateX()た...助けてください。

4

1 に答える 1

3

transition プロパティの 3 番目のデータはタイミング関数です (既に述べたように)。何らかの方法で、遷移で何が起こるかを変更できます (たとえば、別の座標に移動する)

あなたの唯一のオプションはキーフレームを使用していると思います。(結局悪くない)

もちろんベジエ補間にはなりませんが、キーフレームを3～4個指定すれば十分だと思います

修正

私は間違っていた。

はい、バウンス効果は 3 次ベジエで実行できます。

ここでそれについてのクールなページを取得できます

イージング遷移のデモ

問題は、すべてのプロパティが「バウンス」できるわけではないこと、またはより正確には、すべてのプロパティがトランジションの 100% の制限を超えて拡張できるわけではないことだと思います。

ごめん ！

于 2013-03-01T08:35:19.990 に答える