我一直在尝试将animate.css与航点相结合,但我无法让动画发挥作用。 Animate.css创建动画,但它们都发生在页面加载上。我希望动画在元素进入屏幕时发生,这就是我使用航点的原因。
我已将animate和waypoints文件加载到我的网站中,我正在链接到它们。当我加载页面时,我看到我的文本消失了(不透明度设置为0),但是当我滚动时动画不会出现。求救!
在我的标题中:
//css
.custom{position: relative; z-index: 2; border: 1px solid #ccc;}
.sec{
padding: 20px;
border: 1px solid orangered;
background: orange;
height: 100px;
z-index: 1;
}
.sec-wrp{
overflow: hidden;
transition: all ease 1s;
}
.sec-wrp.ng-enter{
opacity: 0;
height: 0;
}
.sec-wrp.ng-enter.ng-enter-active{
opacity: 1;
height: 100px;
}
.sec-wrp.ng-leave{
opacity: 1;
height: 100px;
}
.sec-wrp.ng-leave.ng-leave-active{
opacity: 0;
height: 0;
}
我想要动画的div:
<link rel="stylesheet" href="../../Webartifacts/animate.css-master/animate.min.css">
<script src="../../Webartifacts/imakewebthings-waypoints-34d9f6d/lib/jquery.waypoints.min.js"></script>
<script>
$(document).ready(function(){
// hide our element on page load
$('#animateheader').css('opacity', 0);
$('#animateheader').waypoint(function() {
$('#animateheader').addClass('fadeInUp');
}, { offset: '70%' });
});
</script>
我使用此网站创建了这个:https://spin.atomicobject.com/2015/05/31/scroll-anmiation-css-waypoints/
答案 0 :(得分:0)
带有animate.css的航点
只需添加一个要向其中添加动画的“淡入淡出”类
$('.fade-in-right').css('opacity', 0);
$('.fade-in-right').waypoint(function() {
$('.fade-in-right').addClass('fadeInRight');
}, { offset: '70%' });
$('.fade-in-left').css('opacity', 0);
$('.fade-in-left').waypoint(function() {
$('.fade-in-left').addClass('fadeInLeft');
}, { offset: '70%' });
$('.fade-in-up').css('opacity', 0);
$('.fade-in-up').waypoint(function() {
$('.fade-in-up').addClass('fadeInUp');
}, { offset: '70%' });
$('.fade-in-up').css('opacity', 0);
$('.fade-in-up').waypoint(function() {
$('.fade-in-up').addClass('fadeInUp');
}, { offset: '70%' });