3

我正在使用 wow js 和 animated.css，它太棒了我真的很喜欢当我尝试在用户滚动 500 像素时运行效果时遇到了一个小问题。

我可以看到 jquery 正在插入类以运行效果，但我看不到效果，如果我的 jquery 很丑，也请随时修复。

我在我的页面上插入了 wow 和 animated.css 类手册并且效果很好，当我尝试与 jquery 一起使用时会发生此错误，有代码。

之前的html：

 <footer>
 </footer>

html运行后效果：

<footer class="wow shake" style="visibility: visible; animation-name: shake;">

js：

var fixed = false;    
$(document).scroll(function() {
    if( $(this).scrollTop() >= 500 ) {
        if( !fixed ) {
            fixed = true;
            // $('footer').css({position:'fixed',top:20});
            $('footer').addClass('wow shake').css({visibility: 'visible', 'animation-name': 'shake'});

            // .one('animationend webkitAnimationEnd  mozanimationend MSanimationend oAnimationEnd');
        }
    } else {
        if( fixed ) {
            fixed = false;
            $('footer').removeClass('wow shake');
        }
    }
});
4

2 回答 2

2

您的代码足够接近，检查了行为，发现您应该添加一个额外的类animated来工作。

但是，您想要做的似乎不需要wow.js实现，只需使用

$(target).addClass('animated shake').show();

用动画显示，然后使用

$(target).hide();

隐藏它应该足够了，在片段中添加了一个示例。

如果我误解了你想要达到的目标，请指出我。

new WOW().init();
var fixed = false;
// These are the classes when the animation is processing.
var animateGroup = 'wow shake animated';
$(document).scroll(function() {
    if( $(this).scrollTop() >= 500 ) {
        if( !fixed ) {
            fixed = true;
            // Make them show.
            $('footer')
                .addClass(animateGroup)
                .css({visibility: 'visible', 'animation-name': 'shake'}); 
          
            // Demo without wow.js
            $('.noWow').addClass('animated shake').show();
        }
    } else {
        if( fixed ) {
            fixed = false;
            // Remove anything we just added.
            $('footer')
                .removeClass(animateGroup)
                .removeAttr('style');
                // Or if you have other styles, use below to remove specific style instead.
                //.css({visibility: '', 'animation-name': ''});
          
          // Demo without wow.js
          $('.noWow').hide();
        }
    }
});
body {
    width: 100%;
    height: 2000px;
    background-color: gray;
}

footer {
    visibility: hidden;
    position: fixed;
    top: 20px;
    width: 50px;
    height: 20px;
    background-color: cyan;
}

.noWow {
    display: none;
    position: fixed;
    top: 20px;
    left: 100px;
    width: 50px;
    height: 20px;
    background-color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.4.0/animate.min.css">

<footer>
 </footer>
<div class="noWow">
 </div>

于 2015-08-15T13:07:35.177 回答
1

取而代之的是，您必须使用带有滚动的继续动画...我认为这更好，当您使用滚动在其位置时，动画也可以正常工作...就像这样.....您还可以检查我在Codepen中的示例

 // Repeat demo content
  var $body = $('body');
  var $box = $('.box');
  for (var i = 0; i < 20; i++) {
    $box.clone().appendTo($body);
  }

  // Helper function for add element box list in WOW
  WOW.prototype.addBox = function(element) {
    this.boxes.push(element);
  };

  // Init WOW.js and get instance
  var wow = new WOW();
  wow.init();

  // Attach scrollSpy to .wow elements for detect view exit events,
  // then reset elements and add again for animation
  $('.wow').on('scrollSpy:exit', function() {
    $(this).css({
      'visibility': 'hidden',
      'animation-name': 'none'
    }).removeClass('animated');
    wow.addBox(this);
  }).scrollSpy();
body{
overflow-x:hidden;
}
.box {
  display: block;
  width: 200px;
  background: rgba(255, 255, 255, 0.7);
  color: #eb3980;
  font-family: "Comic Sans MS", "Comic Sans";
  border: 3px dashed pink;
  margin: 30px auto;
  text-align: center;
}

.doge {
  display: block;
  width: 200px;
  height: 200px;
  position: fixed;
  bottom: 10px;
  right: 10px;
  background: url(http://mynameismatthieu.com/WOW/img/wow-8.gif) no-repeat;
}

body {
  background: url(http://mynameismatthieu.com/WOW/img/wow-logo.jpg) #fff fixed no-repeat center center;
}
<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.js"></script>
<script src="https://gitcdn.xyz/repo/thesmart/jquery-scrollspy/0.1.3/scrollspy.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.css" rel="stylesheet"/>
<body>
<div class="box">
  <h1 class="wow slideInLeft">Hello</h1>
  <h1 class="wow slideInRight">World</h1>
  <h2>  </h2>
</div>
<div class="doge wow bounceIn"></div>
</body>

于 2017-08-16T06:48:56.623 回答