0

CSS3を使用して見栄えのするドロップダウンメニューを作成することを期待して、アニメーションを使用してスタイルを設定しました。ドロップのタイミングをより細かく制御できるようにするために、トランジションの代わりにアニメーションを使用しました。これはより美的に心地よいと思います。ただし、アニメーションオーバートランジションを使用すると、逆のプロセスをアニメーション化するのがはるかに難しくなるという問題が発生します。メニューを使用しているときにアニメーションを効果的に一時停止して、トランジションの場合と同じように、アニメーションを逆方向にアニメーション化する方法があるかどうか疑問に思いました。

CSSが現在どのようになっているのかを次に示します。

@-webkit-keyframes s-menu-down /*Safari and Chrome */ {
0%   { width: 100%; height: 0px;}
100% { width: 180px; height: 27px;}
}

@-moz-keyframes s-menu-down /*Firefox */ {
    0%   { width: 100%; height: 0px;}
    100% { width: 180px; height: 27px;}
}

@keyframes s-menu-down {
    0%   { width: 100%; height: 0px;}
    100% { width: 180px; height: 27px;}
}

@-webkit-keyframes s-menu-down-text /*Safari and Chrome */ {
    0%   { color: rgba(84, 83, 81, .0); text-shadow: none;}
    100% { color: rgba(84, 83, 81, 1.0); text-shadow: rgba(238, 238, 238, 1.0);}
}

@-moz-keyframes s-menu-down-text /*Firefox */ {
    0%   { color: rgba(84, 83, 81, .0); text-shadow: none;}
    100% { color: rgba(84, 83, 81, 1.0); text-shadow: rgba(238, 238, 238, 1.0);}
}

@keyframes s-menu-down-text {
    0%   { color: rgba(84, 83, 81, .0); text-shadow: none;}
    100% { color: rgba(84, 83, 81, 1.0); text-shadow: rgba(238, 238, 238, 1.0);}
}

ul#secondary li:hover > ul li {
    -webkit-animation: s-menu-down .5s linear 0 2 alternate;
    -moz-animation: s-menu-down .5s linear 0 2 alternate;
    animation: s-menu-down .5s linear 0 2 alternate;
}

ul#secondary li:hover > ul li a {
    -webkit-animation: s-menu-down-text .5s linear 0 2 alternate;
    -moz-animation: s-menu-down-text .5s linear 0 2 alternate;
    animation: s-menu-down-text .5s linear 0 2 alternate;
}

CSSを交互に設定し、繰り返し2を作成することで、メニューを上下に移動させることができます。メニューを使用できるようにするために、反復の合間に一時停止する、ある種のjavascriptソリューションまたはその効果に対する他の何かを探しています。

4

1 に答える 1

1

また、複数の反復間でアニメーションを一時停止しようとしています。現在、私が見つけた唯一の解決策は、jquery コードを使用して、アニメーションの説明を含む CSS クラスを削除/追加することです。jquery コードはアニメーション時間に依存しており、これは理想的ではありませんが、私は jquery マスターではありません :-)

HTML:

<div id="animateTest" style="height: 500px; width: 500px; background-color: Orange;">
    <table id="animateTable" class="table90deg" style="border: 2px solid Gray; border-radius: 25px;">
        <tr>
            <th>
                Jméno
            </th>
            <th>
                Příjmení
            </th>
            <th>
                Telefon
            </th>
            <th>
                Adresa
            </th>
        </tr>
   </table>

CSS:

@-webkit-keyframes animationIn
{
    0%   {-webkit-transform: rotateY(90deg);}
    25%  {-webkit-transform: rotateY(75deg);}
    50%  {-webkit-transform: rotateY(50deg);}
    75%  {-webkit-transform: rotateY(25deg);}
    100% {-webkit-transform: rotateY(0deg);}
}

@-webkit-keyframes animationOut 
{
    0%   {-webkit-transform: rotateY(0deg);}
    25%  {-webkit-transform: rotateY(25deg);}
    50%  {-webkit-transform: rotateY(50deg);}
    75%  {-webkit-transform: rotateY(75deg);}
    100% {-webkit-transform: rotateY(90deg);}
}


.table90deg
{
    -webkit-transform: rotateY(90deg); 
}  

.tablein
{
    -webkit-animation-name: animationIn;
    -webkit-animation-duration: 2s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;
    -webkit-animation-play-state: running;
}

.tableout
{
    -webkit-animation-name: animationOut;
    -webkit-animation-duration: 2s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;
    -webkit-animation-play-state: running;
}

jQuery:

<script type="text/javascript">
        $("#animateTest").mouseenter(function () {
            $("#animateTable").removeClass("table90deg");
            $("#animateTable").addClass("tablein");

            $("#animateTable").delay(2000).queue(
            function () {
                $("#animateTable").removeClass("tablein");
                $("#animateTable").dequeue();
            });
        });

        $("#animateTest").mouseleave(function () {
            $("#animateTable").addClass("tableout");
            $("#animateTable").delay(2000).queue(
            function () {
                $("#animateTable").removeClass("tableout");
                $("#animateTable").addClass("table90deg");
                $("#animateTable").dequeue();
            });

        });
</script>
于 2011-11-09T12:52:55.140 に答える