Попытка изменить непрозрачность в 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

Один из подходов заключается в использовании CSS-свойства transition-delay и CSS-специфичности для запуска отображения элементов меню (внутри .dropdown-content) после открытия меню,

Поскольку мы знаем, что для завершения анимации открытия меню требуется одна секунда (т. Е. height 1s ease-in), мы можем задержать видимость пунктов меню на одну секунду, чтобы достичь желаемого результата.

Ключевая идея здесь состоит в том, чтобы ввести CSS «класс-модификатор» (то есть .open), который добавляет большую специфичность header и .dropdown-content.Этот модификатор:

• определяет стиль, когда заголовок находится в состоянии «открыто», а
• определяет непрозрачный / видимый стиль потомка .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.Рабочий пример можно найти здесь - надеюсь, это поможет!