Question

我一直在尝试将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/

Answer 1

带有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%' });

将animate.css与航点相结合

1 个答案: