О smoothstate обратная анимация

Я работаю над веб-сайтом, и я решил вставить в него smoothstate.js. Я следил за руководством по установке, и я был в состоянии, но у меня есть только одна проблема. Когда страница загружается, выполняется интро-анимация, но, когда я нажимаю на ссылку и загружаю другую страницу, анимации нет (это должно быть наоборот). Я не вижу, где моя ошибка, не могли бы вы мне помочь? Вот мой код:О smoothstate обратная анимация

<!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);

EDIT: Этим утром я был в состоянии чтобы выяснить ошибку, но теперь есть еще один: это сайт, на котором я работаю: http://www.htmldesign.it Проблема в том, что плавное состояние работает только тогда, когда я нажимаю ссылку, перенаправляемую на ту же страницу, на самом деле он делает обратную анимацию. В противном случае, когда я нажимаю ссылку на другую страницу, обратная анимация не работает. Любое решение?

источник

2015-01-11 Paolo William Siviero

лично я не был в состоянии получить обратную анимацию работы, но и для анимации на каждой странице, вы должны положить ваши

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

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

на каждом страницу, которую вы хотите анимировать.

Вот большое видео, которое меня на правильном пути: Smoothstate.js tutorial

PS. Думаю, id="main" должен быть на внешнем "wrapper", а не там, где он сейчас.

источник

2015-03-12 13:15:05 shaneparsons

Это тоже меня. Вам нужно добавить состояние анимации «Выход» в свой 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). Удачи!

источник

2015-03-23 00:14:49

ли, кажется, не работает для меня какой-то причине – shaneparsons

Убедитесь, что вы вы добавили CSS для самой анимации , Например: '-webkit-animation-duration-duration: 0,25 с; анимация-продолжительность: 0.25s; -webkit-transition-timing-function: ease-in; переход-время-функция: easy-in; -webkit-animation-fill-mode: both; animation-fill-mode: both; ' –

В демонстрации 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.

источник

2016-05-08 21:59:53

О smoothstate обратная анимация

ответ

Смежные вопросы