Question

我试图将smoothState.js嵌入到我的项目中。但出于任何原因，＆＃34;动画方向：交替反转;＆＃34;不工作（或其他）。元素只是淡入而不是淡出。我尝试了一切，但没有任何作用。

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类似的问题。在我的情况下，我只需要将脚本从标题移动到页脚下方。

SmoothState.JS切换动画无法正常工作

1 个答案: