Javascript 如何使用AOS在过滤列表上触发动画
因此,我有一个过滤项目列表,其中还包含加载更多按钮。4个列表项首先显示,其余两个两次显示,直到每个项筛选列表都已用尽。我使用AOS在向下滚动浏览器窗口时为元素设置动画。问题是AOS即使在所有元素被隐藏时也会对其设置动画,因此当它们被显示时,动画不会再次运行。要运行动画,必须将“aos animate”类添加到滚动到浏览器视口时刚刚显示的项目中。我如何做到这一点 HTML: 先谢谢你Javascript 如何使用AOS在过滤列表上触发动画,javascript,jquery,bootstrap-4,aos.js,Javascript,Jquery,Bootstrap 4,Aos.js,因此,我有一个过滤项目列表,其中还包含加载更多按钮。4个列表项首先显示,其余两个两次显示,直到每个项筛选列表都已用尽。我使用AOS在向下滚动浏览器窗口时为元素设置动画。问题是AOS即使在所有元素被隐藏时也会对其设置动画,因此当它们被显示时,动画不会再次运行。要运行动画,必须将“aos animate”类添加到滚动到浏览器视口时刚刚显示的项目中。我如何做到这一点 HTML: 先谢谢你 <link rel="stylesheet" href="https://un
<link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css">
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://unpkg.com/aos@next/dist/aos.js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<ul>
<li class="slist selected" id="ele1"><a href="javascript:;">Element 1</a>
</li>
<li class="slist" id="ele2"><a href="javascript:;">Element 2</a>
</li>
<li class="slist" id="ele3"><a href="javascript:;">Element 3</a>
</li>
<li class="slist" id="ele4"><a href="javascript:;">Element 4</a>
</li>
</ul>
<div class="cwrapper">
<div class="contentEle">
<div data-aos="fade-up" class="content ele1">1:1</div>
<div data-aos="fade-up" class="content ele1">1:2</div>
<div data-aos="fade-up" class="content ele1">1:3</div>
<div data-aos="fade-up" class="content ele1">1:4</div>
<div data-aos="fade-up" class="content ele1">1:5</div>
<div data-aos="fade-up" class="content ele1">1:6</div>
<div data-aos="fade-up" class="content ele1">1:7</div>
<div data-aos="fade-up" class="content ele1">1:8</div>
<div data-aos="fade-up" class="content ele1">1:9</div>
<div data-aos="fade-up" class="content ele1">1:10</div>
<div data-aos="fade-up" class="content ele1">1:11</div>
<div data-aos="fade-up" class="content ele1">1:12</div>
<div data-aos="fade-up" class="content ele2">2:1</div>
<div data-aos="fade-up" class="content ele2">2:2</div>
<div data-aos="fade-up" class="content ele2">2:3</div>
<div data-aos="fade-up" class="content ele2">2:4</div>
<div data-aos="fade-up" class="content ele2">2:5</div>
<div data-aos="fade-up" class="content ele2">2:6</div>
<div data-aos="fade-up" class="content ele2">2:7</div>
<div data-aos="fade-up" class="content ele2">2:8</div>
<div data-aos="fade-up" class="content ele2">2:9</div>
<div data-aos="fade-up" class="content ele2">2:10</div>
<div data-aos="fade-up" class="content ele2">2:11</div>
<div data-aos="fade-up" class="content ele3">3:1</div>
<div data-aos="fade-up" class="content ele3">3:2</div>
<div data-aos="fade-up" class="content ele3">3:3</div>
<div data-aos="fade-up" class="content ele3">3:4</div>
<div data-aos="fade-up" class="content ele3">3:5</div>
<div data-aos="fade-up" class="content ele3">3:6</div>
<div data-aos="fade-up" class="content ele3">3:7</div>
<div data-aos="fade-up" class="content ele3">3:8</div>
<div data-aos="fade-up" class="content ele4">4:1</div>
<div data-aos="fade-up" class="content ele4">4:2</div>
<div data-aos="fade-up" class="content ele4">4:3</div>
</div>
<a href="javascript:;" class="load-more">Load more</a>
</div>
jQuery(function($) {
var $els = $('.contentEle .content').hide(),
$curr;
$('.slist').on('click', function() {
var $this = $(this);
$this.addClass('selected');
$curr = $els.filter('.' + this.id).hide();
$curr.slice(0, 3).show();
$els.not($curr).hide();
}).filter('.selected').click();
$('.load-more').click(function() {
$curr.filter(':hidden').slice(0, 6).show();
});
});