Анимация AOS не работает при смене вкладок?

avatar
beginner854
8 августа 2021 в 19:58
695
1
1

function openCity(evt, cityName) {

  var i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
   }
  document.getElementById(cityName).style.display = "block";
  evt.currentTarget.className += " active";
}

document.getElementById("defaultOpen").click();
body {font-family: Arial;}

/* Style the tab */
.tab {
 overflow: hidden;
 border: 1px solid #ccc;
 background-color: #f1f1f1;
 }

/* Style the buttons inside the tab */
.tab button {
 background-color: inherit;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 14px 16px;
transition: 0.3s;
 font-size: 17px;
}

/* Change background color of buttons on hover */
.tab button:hover {
  background-color: #ddd;
}

/* Create an active/current tablink class */
.tab button.active {
  background-color: #ccc;
}

/* Style the tab content */
.tabcontent {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
</head>
<body>
<p data-aos="zoom-out-up">In this example, we use JavaScript to "click" on the London button, to open the tab on page load.</p>

<div class="tab">
 <button class="tablinks" onclick="openCity(event, 'London')" id="defaultOpen">London</button>
 <button class="tablinks" onclick="openCity(event, 'Paris')">Paris</button>
 <button class="tablinks" onclick="openCity(event, 'Tokyo')">Tokyo</button>
</div>

<div id="London" class="tabcontent" data-aos="zoom-in">
  <h3>London</h3>
  <p>London is the capital city of England.</p>
   </div>

<div id="Paris" class="tabcontent" data-aos="fade-down">
  <h3>Paris</h3>
  <p>Paris is the capital of France.</p> 
</div>

<div id="Tokyo" class="tabcontent" data-aos="flip-up">
 <h3>Tokyo</h3>
 <p>Tokyo is the capital of Japan.</p>
</div>
<script src="https://unpkg.com/aos@next/dist/aos.js"></script>
  <script>
    AOS.init();
  </script>
  </body>
</html> 

Я пытаюсь изучить анимацию AOS. Приведенный выше код является примером кода, который я пытался использовать. Во время загрузки анимация работала для содержимого первой вкладки. Анимация не работала для второй и третьей вкладок. Затем анимация не работает при смене вкладок. Я не использую никаких дополнительных библиотек. Есть предложения?

Источник

Ответы (1)

avatar
amirify
8 августа 2021 в 20:54
0

AOS анимирует элементы, когда они появляются в области просмотра во время вертикальной прокрутки. Вот почему первая вкладка анимируется при загрузке страницы, а другой скрытый элемент — нет; даже после того, как они станут видимыми. Если вы хотите анимировать элементы после того, как вкладка станет видимой, вам следует поискать другую библиотеку, которая анимирует элементы на основе добавления classes, поэтому вы можете добавить соответствующий classes программно. Могу предложить Animate.css