element.classList.addClass не является функцией при тестировании Animate.css - PullRequest
Новая
       108

element.classList.addClass не является функцией при тестировании Animate.css

0 голосов
/ 21 октября 2019

Я скачал Animate.min.css с github репо . Я могу увидеть начальную анимацию после загрузки страницы. 

<h1 class="animated bounce delay-2s">Example</h1>

, но, если я нажимаю на кнопку: 

<button onclick = "myclick()">Animate</button>

функция javascript 

function myclick() {
  const element =  document.querySelector('.my-modern');
  element.classList.addClass('animated', 'bounceOutLeft');
}

бросаетисключение 

test_animate.html:14 Uncaught TypeError: element.classList.addClass is not a function
    at myclick (test_animate.html:14)
    at HTMLButtonElement.onclick (test_animate.html:9)

Я также попытался добавить jquery безуспешно 

<script src="jquery-3.4.1.min.js"></script>

, но я не знаю, что мне делать, чтобы решить эту проблему.

Я ожидаю увидеть анимированный следующий абзац. 

<p name="par_test" class="my-modern">Test this</p>

Редактировать (обнаружил, что проблема связана с IE11)

Я скопировал addClass из отладки Домашняя страница Animate после просмотра этой строки 

  function testAnim(x) {
    $('#animationSandbox').removeClass().addClass(x + ' animated').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){
      $(this).removeClass();
    });
  };

Согласно этому комментарию Я исправил его в 

element.classList.add('animated', 'bounceOutLeft');

и теперь исключениеисчез, но я все еще не вижу ожидаемую анимацию только в IE11 . В Chrome все нормально. Я опубликовал это как проблему на github .

Ответы [ 2 ]

1 голос
/ 21 октября 2019

Element.classList.addClass - это не функция, как вы уже обнаружили. Element.classList.add есть, и хотя IE11 поддерживает его, он не поддерживает предоставление нескольких аргументов для него, как вы делаете.

В MDN имеется polyfill , который вы можете использовать,или вы можете использовать jQuery.

0 голосов
/ 21 октября 2019

После некоторых экспериментов я обнаружил, что следующий код работает как для Chrome, так и для IE11, как и ожидалось. 

<html>
<head>
  <link rel="stylesheet" href="animate.min.css">
  <script src="jquery-3.4.1.min.js"></script>
</head>
<body>
  <h1 class="animated bounce delay-2s">Example</h1>
  <h2 name="par_test" id ="par_id" class="my-modern">Test this</h2>
  <button onclick = "myclick()">Animate</button>
</body>
<script>
function myclick() {
  $('.my-modern').addClass('bounceOutLeft animated');
}
</script>
</html>

Это похоже на использование jQuery API addClass (вместо этогованильного JavaScript classList.add) решил мою проблему.

На самом деле я получил ее от обратного инжиниринга домашней страницы, а не следуя readme хранилища.

Редактировать

Как уже указывалось в этом ответе , основная причина проблемы для IE11 заключается в том, что

не поддерживает предоставление нескольких аргументов для Element.classList.add

поэтому, кроме добавления полифилла или использования jQuery, можно было бы просто сделать: 

element.classList.add('bounceInDown');
element.classList.add('animated');
...