展开 CSS3 动画不起作用

Expand CSS3 animation is not working

本文关键字：不起作用 动画 CSS3 展开      更新时间：2023-09-26

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

<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');
});

在这里摆弄

现在，如果您看到小提琴，甚至在Chrome或FF中运行动画，您会注意到收缩动画工作正常，但是扩展动画很突然，即它不起作用。谁能解释一下为什么动画不起作用？

注意：这似乎不是一致的问题。只有在第一次加载 Fiddle 时，才会出现问题（通过在地址栏中提供 URL 并单击 Go）。当对小提琴进行任何编辑并且我们只是"运行"它时，错误不会发生。我也无法在堆栈代码段中重新创建该问题。

您的动画代码或 CSS 没有问题。问题似乎是由于a.H-menu标签中的href属性造成的。当指定此属性并且没有值时，似乎整个页面在单击菜单图标时被重新加载，因此您看不到动画。

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

  • 在单击事件处理程序中设置href='#'并使用e.preventDefault()（或）
  • 甚至不要在 a.H-menu 标签中提及 href 属性。

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

您可以通过访问以下小提琴来验证我所说的内容（在首次加载时查看控制台）：

  • 摆弄原始代码 - 打开小提琴并立即打开控制台。将显示指示无法加载图像（啤酒壶徽标.png）的错误消息。清除此错误消息，关闭菜单并单击图标以重新打开它。您会注意到错误再次显示（指示它正在重新加载）。
  • 摆弄 href='#' - 执行与上述相同的步骤，您会注意到动画工作正常，并且在单击.H-menu图标时控制台中没有错误消息。
  • 没有 href 的小提琴 - 相同的步骤，您会注意到与第二个小提琴相同的结果。
相关文章：