Упрощение CSS не работает для max-height 0 и max-height auto - PullRequest
Новая
       13

Упрощение CSS не работает для max-height 0 и max-height auto

0 голосов
/ 18 декабря 2018

Я пытаюсь применить легкость и простоту на одной из моих страниц WordPress следующим образом: 

.section1 {
    max-height: 0px;
    overflow: hidden;
    transition: max-height 0.15s ease-out;
}

.section1.show {
    max-height: auto;
    overflow: visible;
    transition: max-height 0.25s ease-in;
}

Однако это не работает, это не упрощение и упрощение ....Что я делаю не так?

Я изменил свой код следующим образом: 

.vc_section {
    max-height: 0px;
    overflow: hidden;
    transition: max-height 1.15s ease-out !important;
}

.section1.show {
    max-height: 500px;
    overflow: visible;
    transition: max-height 1.25s ease-in !important;
}

Упрощение работает, облегчение - нет.Я пытаюсь облегчить работу, когда пользователь нажимает кнопку: 

$('.architectural-films').bind('click', function(){
            if ($(".section1").hasClass("show")) {
                $('.section1').removeClass('show');
            }
            else
            {
                $('.section1').addClass('show');
            }
            return false;
        });

Ответы [ 2 ]

0 голосов
/ 18 декабря 2018

Работает нормально, но вы не увидите нужного эффекта из-за большого значения max-height.По существу, ease-in будет влиять на значение 500px, но если ваш контент имеет небольшую высоту, вы не увидите этого.

Вот базовый пример, который лучше понять: 

.box {
  background:red;
  height:20px;
  width:100px;
  display:inline-block;
  vertical-align:top;
}


/*your code*/
.box {
    max-height: 0px;
    overflow: hidden;
    transition: max-height 1.15s ease-out !important;
}

html:hover .box {
    max-height: 100px;
    overflow: visible;
    transition: max-height 1.25s ease-in !important;
}
<div class="box">

</div>

<div class="box" style="height:100px;">

</div>

Как вы можете видеть, легкость работает отлично на секунду, потому что ее высота достаточно велика, чтобы можно было увидеть эффект в отличие от первого.

Чтобы избежать этого, вам нужно использовать меньшее значение для max-height (близкое к значению высоты) или использовать jQuery, чтобы установить это значение вручную и соответствовать высоте элемента.

0 голосов
/ 18 декабря 2018

К сожалению, auto значения не могут быть анимированы с помощью простого CSS.

Возможно, вы захотите прочитать эту статью CSSTricks для некоторых обходных путей.

Я бы порекомендовалиспользуя jQuery slideDown() с желаемым замедлением:)

...