javascript - 尝试更改 css onclick 中的不透明度

Question

尝试使 onclick 函数使不透明度从 0 到 1，以便 .dropdown-content 不会在全高之前显示。

$(".fa-bars").click(function() {
        $(".fa-times").toggle();
        $("header").css("height", "100%");
        $("header").css("transition", "height 1s ease-in");
        $("header").css("grid-template-rows", "50px 400px");
        $("header").css("grid-row-gap", "20px");
        $("header").css("grid-template-areas", "'dp logo start' 'dc dc dc'");
        $(".dropdown-content").css("display", "grid");
        $(".fa-bars").css("display", "none");
        event.preventDefault();
});

JSFiddle:https://jsfiddle.net/lambsbaaacode/uax6oe94/24/

Answer 1

一种方法是利用 transition-delay CSS 属性和 CSS specificty在菜单打开后触发菜单项的可见性(在 .dropdown-content 内)。

因为我们知道菜单的打开动画需要一秒钟才能完成(即 height 1s ease-in)，所以我们可以将菜单项的可见性延迟一秒钟以达到预期的效果。

这里的关键思想是引入一个 CSS“修饰符类”(即 .open)，它为 header 和 .dropdown-content 添加了更大的特异性。这个修饰符:

• 指定 header 处于“打开”状态时的样式，并且
• 指定当 header 处于打开状态时后代 .dropdown-content 的不透明/可见样式

在 SCSS 中，可以这样写:

header {  
  transition : height 1s ease-in;

  /* Define the dropdown-content transition styles on opacity, where
  the opacity delay causes opacity of menu items to change after menu
  animation (of 1sec) is complete */
  .dropdown-content  {  
    opacity:0;
    transition-property: opacity;
    transition-duration: 0.1s;
    transition-delay: 1s;
    display:block;
  }

  /* CSS modifier class for "header.open" causes height to change
  when open class applied */
  &.open {
    height:100%;
    grid-template-rows: 50px 400px;
    grid-row-gap:20px;
    grid-template-areas:'dp logo start' 'dc dc dc';
  }

  /* When open modifier class applied to parent header, items in the
  .dropdown-content child are set to be opaque/visible */
  &.open .dropdown-content {
    opacity:1.0;
  }
}

使用上面的 SCSS，您可以将脚本简化为:

$(".fa-bars").click(function() {

    /* Add open modifier class to apply new CSS defined above and
    delay visiblity of dropdown-content content */
    $("header").addClass("open");

    $(".fa-times").toggle();
    $(".fa-bars").css("display", "none");
    event.preventDefault();
});
$(".fa-times").click(function() {

    /* Remove open modifier class to hide menu and items */
    $("header").removeClass("open");

    $(".fa-bars").toggle();
    $(".fa-times").css("display", "none");
    event.preventDefault();
});

现在，.dropdown-content 中的菜单项仅在 header 动画完成后可见。一个工作示例 can be found here - 希望对您有所帮助!