Question

目前我正在尝试将animate.css与bootstrap 3，waypoint.js和skrollr.js一起使用。当你向下滚动时，两个特定的div（带有一个“feature-box”类）进入视图，这两个div将使用“摆动”效果进行动画处理。

即使它在Chrome和FF上看起来很棒，动画也不会在Safari上发生，在iOS设备上也是如此。知道为什么吗？我对jquery / js不是很了不起所以我想也许那里有冲突。

我确实在网上做过一些研究，但我仍然找不到线索。我还尝试删除HTML末尾的某些js文件，但结果仍然相同。

以下是我的代码......

HTML

<!DOCTYPE html>
<html>
  <head>
    <title>Test using Bootstrap, Animate.css, Skrollr.js, and Waypoint.js</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/animate.min.css">
    <link rel="stylesheet" href="css/main.css">
  </head>
  <body id="skrollr-body">

    <div id="bg1" class="bg" data-0="background-position:0px 0px;" data-100000="background-position:0px -50000px;">
      <div class="container">
        <div class="row">
          <div class="col-lg-4"><p>Row 1, Col 1</p></div>
          <div class="col-lg-4"><p>Row 1, Col 2</p></div>
          <div class="col-lg-4"><p>Row 1, Col 3</p></div>
        </div>
      </div>
    </div>
    <div id="bg2" class="bg" data-0="background-position:0px 0px;" data-100000="background-position:0px -25000px;">
      <div class="container">
        <div class="row">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse rhoncus neque vel massa mattis, aliquam lacinia nunc molestie. Donec augue elit, scelerisque quis arcu ac, varius dictum turpis.</p>
        </div>
      </div>
    </div>
    <div id="bg3" class="bg" data-0="background-position:0px 0px;" data-100000="background-position:0px -50000px;">
      <div class="container">
        <div class="row">
         <div class="feature-box">
            Animate This Box
          </div>
        </div>
      </div>
    </div>
    <div id="bg2" class="bg" data-0="background-position:0px 0px;" data-100000="background-position:0px -25000px;">
      <div class="container">
        <div class="row">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse rhoncus neque vel massa mattis, aliquam lacinia nunc molestie. Donec augue elit, scelerisque quis arcu ac, varius dictum turpis.</p>
        </div>
      </div>
    </div>
    <div id="bg2" class="bg" data-0="background-position:0px 0px;" data-100000="background-position:0px -25000px;">
      <div class="container">
        <div class="row">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse rhoncus neque vel massa mattis, aliquam lacinia nunc molestie. Donec augue elit, scelerisque quis arcu ac, varius dictum turpis.</p>
        </div>
      </div>
    </div>
    <div id="bg3" class="bg" data-0="background-position:0px 0px;" data-100000="background-position:0px -50000px;">
      <div class="container">
        <div class="row">
         <div class="feature-box">
            Animate This Box
          </div>
        </div>
      </div>
    </div>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/skrollr.min.js"></script>
    <script src="js/waypoint.min.js"></script>
    <script src="js/main.js"></script>
  </body>
</html>

的main.css

body {
    margin: 0;
    height: 100%!important;
}

.bg {
    padding: 30px;
}

#bg1 {
    background: url('http://www.hostpaperz.com/wp-content/uploads/2013/04/rainbow-colorful-nature-hd.jpg') center center no-repeat;
}

#bg2 {
    background: url('http://www.miglo.net/walls/nature-pack-photos-wide.jpg') center center no-repeat;
}

#bg3 {
    background: url('http://wall-height.com/wp-content/uploads/2013/05/Our-Surrendered-Nature-Wallpaper.jpg') center center no-repeat;
}

.feature-box {
background-color: #ecf0f5;
border-radius: 6px;
padding: 14px;
position: relative;
text-align: center;
}

.animated {
-webkit-animation-duration: 0.5s;
-moz-animation-duration: 0.5s;
-o-animation-duration: 0.5s;
animation-duration: 0.5s;
-webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both;
-o-animation-fill-mode: both;
animation-fill-mode: both;
}

MAIN.js

skrollr.init();

var $letsMove = $('.feature-box');

$letsMove.waypoint(function(direction) {
  if (direction === 'down') {
    $(this).addClass('animated wobble');
  }
}, { offset: 'bottom-in-view' });

$letsMove.waypoint(function(direction) {
  if (direction === 'down') {
    $(this).removeClass('animated wobble');
  }
}, { offset: '105%' });

$letsMove.waypoint(function(direction) {
  if (direction === 'up') {
    $(this).addClass('animated wobble');
  }
}, { offset: '0%' });

$letsMove.waypoint(function(direction) {
  if (direction === 'up') {
    $(this).removeClass('animated wobble');
  }
}, { offset: '-5%' });

欣赏洞察力！

Animate.css在Safari上不起作用

0 个答案: