Question

我有一个非常简单的叠加导航，见下文：

<nav role="navigation" class="navigation">
    <a href="#" class="brand-logo"><img src="img/beer-jug-logo.png" alt="brand logo"></a>
    <ul class="navigation-list">
        <li><a href="">Home</a></li>
        <li><a href="">About</a></li>
        <li><a href="">Design</a></li>
        <li><a href="">Interiors</a></li>
        <li><a href="">Contact</a></li>
    </ul>
    <a class="close"></a>
</nav>

现在我添加了一个非常简单的CSS扩展和缩小动画，并使用jQuery切换这些动画。动画代码如下：

.navigation.shrinkMenu {
    -webkit-animation-name: shrinkMenu;
    -o-animation-name: shrinkMenu;
    animation-name: shrinkMenu;
    -webkit-animation-duration: 1s;
    -o-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    -o-animation-fill-mode: both;
    animation-fill-mode: both;
}
.navigation.expandMenu {
    -webkit-animation-name: expandMenu;
    -o-animation-name: expandMenu;
    animation-name: expandMenu;
    -webkit-animation-delay: 3s;
    -o-animation-delay: 3s;
    animation-delay: 3s;
    -webkit-animation-duration: 1s;
    -o-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    -o-animation-fill-mode: both;
    animation-fill-mode: both;
}
@keyframes  shrinkMenu {
    90% {
        opacity: 0;
    }
    99%  {
        left: 50%;
        top: 50%;
        bottom: 50%;
        right: 50%;
    }
    100%  {
        opacity: 0;
        visibility: hidden;
        left: 50%;
        top: 50%;
        bottom: 50%;
        right: 50%;
    }
}
@keyframes expandMenu {
    0%  {
        left: 50%;
        top: 50%;
        bottom: 50%;
        right: 50%;
    }
    100%  {
        left: 0;
        top: 0;
        bottom: 0;
        right: 0;
    }
}

菜单上的初始样式如下：

.navigation  {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /*background: rgba(244 ,41, 65,.9);*/
    background: rgba(255 ,255, 255,.9);
    display: flex;
    align-items:center;
    justify-content:center;
    flex-direction:column;
    z-index: 999;
}

切换菜单可见性的jQuery代码如下：

$('.close').on('click', function() {
    $('.navigation').addClass('shrinkMenu');
});
$('.H-menu').on('click', function() {
    $('.navigation').addClass('expandMenu');
});

FIDDLE HERE

现在，如果您看到小提琴或甚至在Chrome或FF中运行动画，您会注意到缩小动画效果很好，但扩展动画是突然的，I.E。它只是不起作用。任何人都可以解释为什么动画不起作用？

Answer 1

注意：这似乎不是一致的问题。只有在第一次加载时才会出现问题（通过在地址栏中输入URL并单击Go）。当对小提琴进行任何编辑时，我们只是＆＃34;运行＆＃34;它，错误不会发生。我无法在Stack Snippet中重新创建该问题。

动画代码或CSS没有问题。该问题似乎是由href标记中的a.H-menu属性引起的。指定此属性且没有值时，似乎整个页面在点击菜单图标时重新加载，因此您无法看到动画。

您可以执行以下操作之一：

设置href='#'并在点击事件处理程序（或）中使用e.preventDefault()
甚至没有提及href代码中的a.H-menu属性。

执行上述任一操作意味着不会重新加载页面，因此会显示动画。

您可以访问以下Fiddles（首次加载时查看控制台）来验证我的意思：

Fiddle with original code - 打开小提琴并立即打开控制台。将显示错误消息，指示无法加载图像（beer-jug-logo.png）。清除此错误消息，关闭菜单并单击图标以重新打开它。您会注意到错误再次显示（表示它正在重新加载）。
Fiddle with href='#' - 执行与上述相同的步骤，您发现动画正常工作，并且点击.H-menu图标后控制台中没有错误消息。
Fiddle with no href - 同样的步骤，您会注意到与第二小提琴相同的结果。

展开CSS3动画无效

1 个答案: