Почему aos не работает в циклах?
<?php if (have_rows("katalog")) : ?> <?php while (have_rows("katalog")) : the_row(); ?> <div class="item" data-aos="fade-up" data-aos-duration="2500"> <div class="title"><?php the_sub_field("title"); ?></div> <?php endwhile; ?> <?php endif; ?> |
<?php if (have_rows("katalog")) : ?> <?php while (have_rows("katalog")) : the_row(); ?> <div class="item" data-aos="fade-up" data-aos-duration="2500"> <div class="title"><?php the_sub_field("title"); ?></div> <?php endwhile; ?> <?php endif; ?>
Хочу что бы каждый item в цикле пролистывался с эффектом
Ноль эмоций
если на контейнер это повесить, то работает. но контейнер не то
такое еще наблюдал в swiper
Дополнительно:
Жс тут вообще каким боком?
Ответы:
У вас этот див не закрыт
<div class="item" data-aos="fade-up" data-aos-duration="2500"> |
<div class="item" data-aos="fade-up" data-aos-duration="2500">
Попробуйте так
<?php if (have_rows("katalog")) : ?> <?php while (have_rows("katalog")) : the_row(); ?> <div class="item" data-aos="fade-up" data-aos-duration="2500"> <div class="title"><?php the_sub_field("title"); ?></div> </div> <?php endwhile; ?> <?php endif; ?> |
<?php if (have_rows("katalog")) : ?> <?php while (have_rows("katalog")) : the_row(); ?> <div class="item" data-aos="fade-up" data-aos-duration="2500"> <div class="title"><?php the_sub_field("title"); ?></div> </div> <?php endwhile; ?> <?php endif; ?>
- да закрыт
я сюда вписал не правильно
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Проблема с использованием анимации "aos" в циклах может возникать из-за того, что скрипт инициализации "aos" вызывается до того, как все элементы, к которым он должен применяться, загрузятся на странице.
Для того чтобы решить эту проблему, необходимо убедиться, что скрипт инициализации "aos" вызывается после того, как все элементы загрузятся на странице. Для этого можно использовать различные способы, например, использовать событие загрузки страницы или использовать функцию обратного вызова после загрузки всех элементов.
Приведу пример на языке PHP, как можно решить эту проблему:
<title>Пример использования AOS в циклах</title> <div class="container"> <?php $items = ["Item 1", "Item 2", "Item 3"]; foreach($items as $item) { echo "<div class='item' data-aos='fade-up'>$item</div>"; } ?> </div> window.onload = function() { AOS.init(); };
В данном примере, скрипт инициализации "aos" вызывается после загрузки всех элементов страницы, что позволяет корректно применить анимацию к элементам, созданным в цикле. Таким образом, следует убедиться, что скрипт инициализации "aos" вызывается после загрузки всех элементов, чтобы избежать проблем с применением анимации в циклах.