Question

我有一个Svg汉堡菜单，用于定位事件监听器，
这会调用javascript .animate（）api并从左侧进入菜单窗格，
但是，当动画完成时，它消失了（它没有返回到其原始位置），而消失了。我希望它保持原状，然后设置一个单独的功能使其淡出或滑动回去。

我的HTML在这里：

<svg>`Hamburger Code`</svg>

<section id="menuPane" class="lftMenu"
         style="position:absolute;
                left:-888px;
                z-index:18;">
    <div class="test">

    </div>
    <div class="tst2">

    </div>
</section>

我的CSS在这里：

    .test{
        display:block;
        position:absolute;
        width:calc(27vw - 7vmax);
        height:calc(55vh + 4.8vmin);
        top:48.4px; left:8px;
        background-image:linear-gradient(-48deg,green,yellow);
        border-radius:8.2px;
        z-index:19;
        }
    .test:before{
        content:"";
        display:block;
        position:relative;
        width:inherit; height:inherit;
        filter:opacity(0.55) hue-rotate(120deg);
        background-image:radial-gradient(ellipse at top,blue,green);
        border:solid inset 28px transparent;
        border-radius:8.2px;
        z-index:20;
        }
    .tst2{
        display:block;
        position:absolute;
        top:48.4px; left:8px;
        width:calc(27vw - 7vmax); height:calc(55vh + 4.8vmin);
        background-image:url('GalvPlt1.jpg');
        background-size:contain;
        filter:opacity(0.2);
        border-radius:8.2px;
        z-index:21;
        }
    .tst2:hover{
        filter:hue-rotate(208deg) opacity(0.44);
        }

我的Javascript在这里：

            const menu_pane = document.getElementById("menuPane");

            //UiContr.animate([
                // Animate opacity to fade in during page load.
                //])

        let Elem = document.getElementById("Elem");      // This El is the svg box above the menu pane.
            Elem.style.position = "absolute";
            //Elem.style.willChange = "auto";
            Elem.animate({
                 opacity: ['1', '0.224', '1', '0.498', '1'],
                 filter: ['hue-rotate(0deg)', 'hue-rotate(-72deg)', 'hue-rotate(0deg)']
                 // borderRadius: ['8px', '14px']
                    },{ duration: 4864,
                        easing: 'ease-in-out',
                        iterations:7800
                        // 0.1 hours = 360,000 ms...
                        // fill: 'reverse'
            });

            Elem.addEventListener('click',(e) => {
                // menu.style.animationFillMode = 'forwards';
                menu_pane.animate({
                    left: ['-888px','8px']
                },{ duration: 600,
                    easing: 'ease-in-out',
                    iterations:1,
                    // fill: forwards,
                });/*.then(
                menu_pane.style.left = "8px";
                );*/
            });

它们位于3层画布，一个缓冲区，一个菜单和主游戏窗口的顶部。全部具有较低的z-index值。我不知道它要去哪里... 我尝试过：

menu.style.animationFillMode = 'forwards';

*。在CSS文件中尝试过此操作，也没有使用过驼峰式案例。[不进行任何操作。]

作为一个类似的问题，动画总是返回到初始状态。但这意味着它将滑回左侧，而不仅是弹出屏幕并向下滚动到酒吧。.我还尝试在最后链接.then（），但这也失败了。

此外，我观看了本教程，并使用填充：正向，反向或两者兼而有之，也将无穷大作为.animate（）的选项进行迭代，但现在我尝试这些都不被识别或起作用。
> ....部分已解决，Infinity需要首字母大写。

此外，这是从以下两种方法中编写这些代码的最佳方法；

Youtube教程版本为：

    .animate({property:['from','to']},{',' seperated options});

MDN版本为：

    .animate([{Property: 'from'},{Property: 'to'}],{',' seperated options});

这些示例中的

都可以工作并赋予相同的动画效果，可达到58fps，但是是否有“正确”或“最佳”的编写方式。我会更倾向于MDN版本更“正确”或最佳，但是这两个变体有什么原因，我应该选择哪个？
尽管在MDN版本中，您必须多次编写属性名称，并且使用复杂的多参数动画编写，但最终可能会花费更多的代码。任何输入：

这是V. Javascript .animate（）函数的示例版本。

    document.getElementById("tunnel").animate([
          // keyframes
           { transform: 'translateY(0px)' }, 
           { transform: 'translateY(-300px)' }
    ], { 
          // timing options
             duration: 1000,
             iterations: Infinity
    });

在此先感谢任何评论或回答的人。

Vanil Javascript .animate（）汉堡包菜单在完成后消失

0 个答案: