Блог

Главная - Вопросы по программированию - Переход CSS является мгновенным элементом

Переход CSS является мгновенным элементом

#javascript #html #css

#javascript #HTML #css

Вопрос:

РЕДАКТИРОВАТЬ: исправлено, оказывается, Elementor перезаписывает некоторые стили, см. Мой собственный ответ ниже.

Я пытаюсь анимировать простое свойство max-height для div, но, похоже, я не могу анимировать переход, он переходит мгновенно. Я пытаюсь воспроизвести этот учебник по w3schools: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_collapsible_animate

Я использую этот Javascript для изменения максимальной высоты при нажатии кнопки:

 <script>
    var coll = document.getElementsByClassName("section_button");
    
    var i;
    for (i = 0; i < coll.length; i  ) {
      coll[i].addEventListener("click", function() {
        
        var content = this.nextElementSibling;
        if (content.style.maxHeight){
          content.style.maxHeight = null;
        } else {
          content.style.maxHeight = content.scrollHeight   "px";
        }
      });
    }
</script>

И это мой CSS:

 .section_content {
  max-height: 0;
  overflow: hidden;
  -webkit-transition: all 2s ease;
  -moz-transition: all 2s ease;
  -ms-transition: all 2s ease;
  -o-transition: all 2s ease;
  transition: all 2s ease;
}

Скрытие div работает, оно просто не анимируется, в то время как пример w3schools отлично анимируется в моем браузере Safari. Я также пробовал Chrome, но без разницы.

Некоторая информация о настройке:

  • Браузер: Safari 14 (Chrome без разницы)
  • WordPress с Elementor для создания страницы
  • Плагин фрагментов кода для внедрения JS

Я перепробовал все, что нашел в Интернете, но, похоже, ничего не помогает. Вероятно, есть какая-то очевидная ошибка, которую я наблюдаю прямо сейчас, поэтому любая помощь приветствуется!

Ответ №1:

Вы не предоставили полный код для проверки. Но проверьте приведенный ниже код, я скопировал ваш код и добавил другой. проверьте, не обнаружили ли вы, чего вам не хватает.

     var coll = document.getElementsByClassName("section_button");
    
    var i;
    for (i = 0; i < coll.length; i  ) {
      coll[i].addEventListener("click", function() {
        
        var content = this.nextElementSibling;
        if (content.style.maxHeight){
          content.style.maxHeight = null;
        } else {
          content.style.maxHeight = content.scrollHeight   "px";
        }
      });
    } 
 .section_content {
  max-height: 0;
  overflow: hidden;
  -webkit-transition: all 2s ease;
  -moz-transition: all 2s ease;
  -ms-transition: all 2s ease;
  -o-transition: all 2s ease;
  transition: all 2s ease;
}

.content {
  padding: 0 18px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  background-color: #f1f1f1;
} 
 <button class="section_button">Open Collapsible</button>
<div class="content">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

Комментарии:

1. Спасибо за ваш ответ, вы абсолютно правы, я не все добавил, и оказалось, что elementor фактически перезаписывает мое свойство transform . Я объясню все в своем собственном ответе, чтобы другие пользователи могли его найти. Еще раз спасибо

Ответ №2:

Так что на самом деле оказалось, что Elementor перезаписывает свойство transform 😑 . Поскольку мне не нужен стиль преобразования Elementor, я просто использовал !important свой собственный стиль для Elementors:

 .section_content {
  max-height: 0;
  overflow: hidden;
  -webkit-transition: all 0.5s ease !important;
  -moz-transition: all 0.5s ease !important;
  -ms-transition: all 0.5s ease !important;
  -o-transition: all 0.5s ease !important;
  transition: all 0.5s ease !important;
}

Думаю, я должен лучше использовать инспектор 🙃