Question

一旦用户滚动到页面的特定点，我就会对元素的反弹进行动画处理。我有这个工作，通过添加一个类，然后在此时删除它。但是，我还有另一个反弹动画。我希望元素在用户向上滚动时弹回。所以，我想添加＆＃39;滚动＆＃39;和＃＆＃39;持续时间＆＃39;滚动时的类，然后当用户向后滚动时，我想添加＆＃39;持续时间＆＃39;并且＆＃39;未滚动＆＃39;类。

这是一个简单的版本：

＆＃13;

$(window).scroll(function(){
          if ($(window).scrollTop() > 200){
              $('.bounce-square').addClass( 'duration scrolled');
          }
          else{
            $('.bounce-square').removeClass( 'duration scrolled');
            //$('.bounce-square').addClass( 'duration not-scrolled');
          }
       });

＆＃13;

.bounce-square{
  background-color: red;
  height: 100px;
  width: 100px;
  position: fixed;
  top: 15%;
  left: 15%;
  opacity: 0;
}

.scrolled{
  opacity: 1;
  animation-name: bounceIn;
}

.not-scrolled{
  animation-name: bounceOut;
}

.duration{
  animation-duration: .75s;
}

@keyframes bounceIn {
  from, 20%, 40%, 60%, 80%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  0% {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
    transform: scale3d(.3, .3, .3);
  }

  20% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }

  40% {
    -webkit-transform: scale3d(.9, .9, .9);
    transform: scale3d(.9, .9, .9);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(1.03, 1.03, 1.03);
    transform: scale3d(1.03, 1.03, 1.03);
  }

  80% {
    -webkit-transform: scale3d(.97, .97, .97);
    transform: scale3d(.97, .97, .97);
  }

  to {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

@keyframes bounceOut {
  20% {
    -webkit-transform: scale3d(.9, .9, .9);
    transform: scale3d(.9, .9, .9);
  }

  50%, 55% {
    opacity: 1;
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }

  to {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
    transform: scale3d(.3, .3, .3);
  }
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="bounce-square"></div>
<p>Please scroll a little</p>
<div style="height: 3000px"></div>

＆＃13;

我已经注释掉了我认为可行的一行Javascript。

我尝试过混合使用toggleclass并在不同的位置删除/添加类，但没有任何东西按照我想象的方式工作。

我很感激任何帮助。

在这里小提琴：https://jsfiddle.net/hbndag6L/1/

感谢。

Answer 1

重新添加和删除逻辑可以更接近所需的效果。从这里你可以调整css来增强。

var bounce = $('.bounce-square');
bounce.addClass('duration');

$(window).scroll(function() {
  if ($(window).scrollTop() > 200) {
    bounce.removeClass('not-scrolled');
    bounce.addClass('scrolled');
  } else {
    if (bounce.hasClass('scrolled')) {
      bounce.removeClass('scrolled');
      bounce.addClass('not-scrolled');
    }
  }
});

.bounce-square {
  background-color: red;
  height: 100px;
  width: 100px;
  position: fixed;
  top: 15%;
  left: 15%;
  opacity: 0;
}
.scrolled {
  opacity: 1;
  animation-name: bounceIn;
}
.not-scrolled {
  animation-name: bounceOut;
}
.duration {
  animation-duration: .75s;
}
@keyframes bounceIn {
  from, 20%, 40%, 60%, 80%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }
  0% {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
    transform: scale3d(.3, .3, .3);
  }
  20% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }
  40% {
    -webkit-transform: scale3d(.9, .9, .9);
    transform: scale3d(.9, .9, .9);
  }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(1.03, 1.03, 1.03);
    transform: scale3d(1.03, 1.03, 1.03);
  }
  80% {
    -webkit-transform: scale3d(.97, .97, .97);
    transform: scale3d(.97, .97, .97);
  }
  to {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
@keyframes bounceOut {
  20% {
    -webkit-transform: scale3d(.9, .9, .9);
    transform: scale3d(.9, .9, .9);
  }
  50%,
  55% {
    opacity: 1;
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }
  to {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
    transform: scale3d(.3, .3, .3);
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="bounce-square"></div>
<p>Please scroll a little</p>
<div style="height: 3000px"></div>

在滚动时向元素添加和删除多个类，反转动画

1 个答案: