Javascript 关于smoothstate反向动画_Javascript_Jquery_Css

Javascript 关于smoothstate反向动画

javascript jquery css

Javascript 关于smoothstate反向动画,javascript,jquery,css,Javascript,Jquery,Css,我正在开发一个网站，我决定在其中插入smoothstate.js。我遵循了一个关于如何安装它的指南，并且我能够安装，但是我只有一个问题。加载页面时，将执行简介动画，但是，当我单击链接并加载另一个页面时，没有动画（这应该与简介的动画相反）。我看不出我的错在哪里，你能帮我吗？这是我的密码： <!doctype html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" h

我正在开发一个网站，我决定在其中插入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>

编辑：今天早上我发现了一个错误，但现在有另一个错误：这是我正在工作的网站：

问题是，smoothstate仅在我单击在同一页面上重定向的链接时才起作用，事实上它执行反向动画。否则，当我单击另一页的链接时，反向动画将不起作用。有什么解决方案吗？

我个人无法让反向动画正常工作，但对于每个页面上的动画，您必须将

及

在你想要动画的每一页上

这是一个很棒的视频，让我走上了正确的道路：

另外，我认为

id=“main”

应该放在外面的

“包装器”

上，而不是现在的位置。

这也吸引了我。您需要将“退出”动画状态添加到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演示中，他使用了一个过时的jQuery函数：

.toggleAnimationClass（）

。他更新了github文档，在他的示例中，在

onStart

属性中，他添加了一个

正在退出

类，然后调用：

smoothState.restartCSSAnimations();

以重新启动动画。您仍然需要告诉动画在CSS中反向运行。应该是这样的：

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

这里有一个最近的指南，介绍如何确保您已经为动画本身添加了CSS。例如：

-webkit动画持续时间：0.25s；动画持续时间：0.25s-webkit过渡计时功能：易用；过渡时间功能：轻松进入-webkit动画填充模式：两者都有；动画填充模式：两者都有
.m-scene.is-existing{
    -webkit-animation-direction: alternate-reverse;
    animation-direction: alternate-reverse;
}