animazioni css, nome-animazione, smoothstate.js

Question

Cercando di animare alcune transizioni di pagina con smoothstate.js e sono in un vicolo cieco.

Ecco un jsfiddle, ma sta generando un errore della console che non riesco a ottenere durante lo sviluppo. Tuttavia è ancora possibile vedere il problema css sto parlando: http://jsfiddle.net/3f5wp9xL/6/

Ecco un altro demo, che non ha l'errore console: http://davidwesleymartin.com/animtest/index.html

Tutte le animazioni sono ubicati in CSS (via @keyframe, proprietà di animazione).

Le animazioni funzionano sul caricamento della pagina, ma si stanno comportando in modo strano quando provo a invertirle dopo aver fatto clic su un collegamento. Sto cercando di capovolgerli reimpostando la proprietà 'animation-direction' quando una classe exit ('is-exiting') viene aggiunta al container principale dopo aver fatto clic su un link.

L'unico modo per farlo funzionare è anche impostare un NUOVO valore per "nome-animazione", se questo è lo stesso valore di prima, non funziona.

Rilevante HTML:

<div id='main'> 
    <aside class='main-side'> 
    <div class='anim_element anim_element--fadeIn'> 
     <h2>sidebar</h2> 
     <ul> 
     <li> 
      <a href='index.html'>Link 1</a> 
     </li> 
     <li> 
      <a href='index.html'>Link 2</a> 
     </li> 
     <li> 
      <a href='index.html'>Link 3</a> 
     </li> 
     </ul> 
    </div> 
    </aside> 
    <div class='main-content'> 
    <div class='anim_element anim_element--fadeInLeft'> 
     <h1>Main Content</h1> 
     <p>Lorem...</p> 
    </div> 
    </div> 
</div> 

Rilevante CSS (nota: tutto è correttamente preceduto sul demo, non è questo il problema):

@keyframes fadeIn{ 
    0% { 
     opacity:0; 
     transform:scale(0.8); 
    } 
    100% {opacity:1;} 
} 
@keyframes fadeInLeft{ 
    0% { 
     opacity:0; 
     transform: translate3d(-100%, 0, 0); 
    } 
    100% { 
     opacity:1; 
    } 
} 

#main .anim_element{ 
    animation-duration: .25s; 
    transition-timing-function: ease-in; 
    animation-fill-mode: both; 
} 

#main .anim_element--fadeIn{ 
    animation-name: fadeIn; 
} 
#main .anim_element--fadeInLeft{ 
    animation-name: fadeInLeft; 
} 

#main.is-exiting .anim_element{ 
    animation-name: fadeIn; 
    animation-direction: alternate-reverse; 
} 

Answer 1

Funziona per me.

http://davidwesleymartin.com/animtest/index.html

Ma jsfiddle demo è rotto. Penso che sia necessario specificare la pagina da caricare in href.

Funziona.

<a href='index.html'>Link 3</a> 

Non funziona.

<a href='/'>Link 3</a> 

Il punto è la pagina collegata ha #main elemento o meno. Penso che questo sia un bug di smoothState.js. L'errore si è verificato in questa riga per me che è quando si trova un elemento #id.

https://github.com/weblinc/jquery.smoothState.js/blob/master/jquery.smoothState.js#L215

UPDATE

Per riavviare l'animazione CSS3, è necessario ridisegnare elemento. più

informazioni: http://css-tricks.com/restart-css-animation/

;(function($) { 
    'use strict'; 
    $.fn.restartCSSAnimation = function(cls) { 
    var self = this; 
    self.removeClass(cls); 
    $.smoothStateUtility.redraw(self); 
    setTimeout(function() { self.addClass(cls) }); 
    return self; 
    }; 
    var $body = $('html, body'), 
     content = $('#main').smoothState({ 
     // Runs when a link has been activated 
     onStart: { 
      duration: 1000, // Duration of our animation 
      render: function (url, $container) { 
      // toggleAnimationClass() is a public method 
      content.toggleAnimationClass('is-exiting'); 
      // restart animation 
      $('.anim_element--fadeIn').restartCSSAnimation('anim_element--fadeIn'); 
      $('.anim_element--fadeInLeft').restartCSSAnimation('anim_element--fadeInLeft'); 
      // Scroll user to the top 
      $body.animate({scrollTop: 0}); 
      } 
     } 
     }).data('smoothState'); 
})(jQuery); 

CSS

#main .anim_element--fadeIn { 
    -webkit-animation-name: fadeIn; 
      animation-name: fadeIn; } 

#main .anim_element--fadeInLeft { 
    -webkit-animation-name: fadeInLeft; 
      animation-name: fadeInLeft; } 

#main.is-exiting .anim_element { 
    -webkit-animation-direction: alternate-reverse; 
      animation-direction: alternate-reverse; } 

http://jsfiddle.net/jewmmqoa/2/