SmoothState.JS切换动画不起作用

Question

我尝试将smoothState.js嵌入到我的项目中。但由于任何原因，“动画方向:交替反转；”不起作用(或其他原因)。元素只是淡入而不是淡出。我什么都试过了，但都不管用。

html

<div id="main" class="m-scene">
  <a href="archive02.php">archive</a>
  <div class="scene_element scene_element--fadein">
    <div class="project_headline">
        <p>P01</p>
    </div>
  </div>
</div>

    <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.11.1.min.js"><\/script>')</script>
    <script src="jquery.smoothState.js"></script>
    <script src="functions.js"></script>
    <!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
    <script>
        (function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
        function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
        e=o.createElement(i);r=o.getElementsByTagName(i)[0];
        e.src='//www.google-analytics.com/analytics.js';
        r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
        ga('create','UA-XXXXX-X');ga('send','pageview');
    </script>

Css

m-scene .scene_element {
  animation-duration: 5.25s;
  -webkit-animation-duration: 5.25s;
  -moz-animation-duration: 5.25;
  transition-timing-function: ease-in;
  -webkit-transition-timing-function: ease-in;
  -moz-transition-timing-function: ease-in;
  animation-fill-mode: both;
  -webkit-animation-fill-mode: both;
  -moz-animation-fill-mode: both;
}

.m-scene .scene_element--fadein {
  animation-name: fadeIn;
  -webkit-animation-name: fadeIn;
  -moz-animation-name: fadeIn;
}

.m-scene.is-exiting .scene_element {
  animation-direction: alternate-reverse;
  -webkit-animation-direction: alternate-reverse;
  -moz-animation-direction: alternate-reverse;
}

/*
 * Keyframes
 */
@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@-webkit-keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@-moz-keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

JS

// Contents of functions.js
;(function($) {
  'use strict';
  var $body = $('html, body'),
      content = $('#main').smoothState({
        // Runs when a link has been activated
        onStart: {
          duration: 250, // Duration of our animation
          render: function (url, $container) {
            // toggleAnimationClass() is a public method
            // for restarting css animations with a class
            content.toggleAnimationClass('is-exiting');
            // Scroll user to the top
            $body.animate({
              scrollTop: 0
            });
          }
        }
      }).data('smoothState');
      //.data('smoothState') makes public methods available
})(jQuery);

希望有人能帮助我:)

Answer 1

我在使用smoothState.js时也遇到了类似的问题。在我的例子中，我只需要将脚本从页眉移到页脚下面。