Question

我正在网站上工作，我决定将smoothstate.js插入其中。我已经按照指南安排了它，我能够，但我只有一个问题。当页面被加载时，执行介绍动画但是，当我点击一个链接并加载另一个页面时，没有动画（这应该是介绍的反面）。我无法看出我的错误在哪里，你能帮助我吗？这是我的代码：

  <!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="../Css/main.css">
<link rel="stylesheet" href="../Css/servizi.css">
<link rel="stylesheet" href="../Css/animate.css">
<link rel="stylesheet" href="../Css/pagetransition.css">
<title>Htmldesign.it - Web and Visual Designer</title>


</head>

<body>    
    <div id="wrapper" class="m-scene">
    <!--Header-->    
        <header>

        <div id="logo">
                <a href="../index.html"><img src="../Images/logo.png" alt="htmldesign.it"></a>           
        </div>

        <nav>
            <ul>
                <li><a href="../index.html"><span>HOMEPAGE</span></a></li>  
                <li><a href="servizi.html">SERVIZI</a></li>  
                <li><a href="portfolio.html">PORTFOLIO</a></li>  
                <li><a href="contatti.html">CONTATTI</a></li>   
           </ul>
        </nav>

        </header>

        <section id="main"  class="scene_element scene_element--fadeinleft">
            <div>.....other things....</div>     
        </section>  

    <div class="pushfooter"></div>
    </div>      
    </div> 

    <!--Footer-->  
    <footer>
  /**/
    </footer>
<script src="../js/jquery-1.11.2.min.js"></script>
<script src="../js/jquery.smoothState.js" language="javascript"></script>
<script src="../js/menuservizi.js" language="javascript"></script>
<script src="../js/function.js" language="javascript"></script>
</body>
</html>

pagetransition.css -------------------------------------------------- ----------------- * /

/* line 6, /Users/mperez/Sites/smoothstate/source/stylesheets/pageTransitions.css.scss */
.m-scene .scene_element {
  -webkit-animation-duration: 0.25s;
  animation-duration: 0.25s;
  -webkit-transition-timing-function: ease-in;
  transition-timing-function: ease-in;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both; }
/* line 22, /Users/mperez/Sites/smoothstate/source/stylesheets/pageTransitions.css.scss */
.m-scene .scene_element--fadeinup {
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp; }
.m-scene .scene_element--fadeinout {
  -webkit-animation-name: fadeInOut;
  animation-name: fadeInOut; }
/* line 27, /Users/mperez/Sites/smoothstate/source/stylesheets/pageTransitions.css.scss */
.m-scene .scene_element--fadeinright {
  -webkit-animation-name: fadeInRight;
  animation-name: fadeInRight; }
.m-scene .scene_element--fadeinleft {
  -webkit-animation-name: fadeInLeft;
  animation-name: fadeInLeft; }
/* line 38, /Users/mperez/Sites/smoothstate/source/stylesheets/pageTransitions.css.scss */
.m-scene.is-exiting .scene_element {
  -webkit-animation-direction: alternate-reverse;zz
  animation-direction: alternate-reverse; }

function.js
    ;(function ($) {
  'use strict';
  var $body    = $('html, body'), // Define jQuery collection 
      content  = $('#main').smoothState({
        onStart : {
          duration: 250,
          render: function () {
            content.toggleAnimationClass('is-exiting');

            // Scroll user to the top
            $body.animate({ 'scrollTop': 0 });

          }
        }
      }).data('smoothState');
})(jQuery);

编辑：今天早上我能够弄清楚错误，但现在还有另一个错误：这是我正在处理的网站：http://www.htmldesign.it 问题是，当我点击在同一页面上重定向的链接时，smoothstate才起作用，实际上它是反向动画。否则，当我单击其他页面的链接时，反向动画不起作用。任何解决方案？

Answer 1

在作者网站的smoothstate演示中，他使用了过时的jQuery函数：.toggleAnimationClass()。他更新了github文档，在他的示例中，在onStart属性中，他添加了一个is-exiting类，然后调用：

smoothState.restartCSSAnimations();

重启动画。您仍然需要告诉动画在CSS中反过来。它应该是这样的：

.m-scene.is-existing{
    -webkit-animation-direction: alternate-reverse;
    animation-direction: alternate-reverse;
}

这里是关于如何implement it on a site.

的最新指南

Answer 2

我个人无法使用反向动画，但是对于每页的动画，你必须把你的

<div id="wrapper" class="m-scene">

和

<section id="main" class="scene_element scene_element--fadeinleft">

在您想要动画的每个页面上。

这是一个很棒的视频让我走上了正确的道路： Smoothstate.js tutorial

PS。我认为id="main"应位于外"wrapper"而不是现在的位置。

Answer 3

这也让我感到高兴。您需要将“退出”动画状态添加到CSS中。例如：

.m-scene.is-exiting .scene_element {
    -webkit-animation-direction: alternate-reverse;
    animation-direction: alternate-reverse;
    -webkit-animation-name: zoomIn; // These lines
    animation-name: zoomIn;         // These lines
}

当您退出页面时，您想要运行的动画应该在这里（我使用zoomIn）。祝你好运！

关于smoothstate反向动画

3 个答案: