css анимации, анимация-имя, smoothstate.js

Question

Попытка анимировать некоторые переходы страниц с smoothstate.js, и я в тупике.

Вот jsfiddle, но это вызывает консольную ошибку, которую я не получаю при разработке. Однако вы все еще можете увидеть проблему CSS я говорю: http://jsfiddle.net/3f5wp9xL/6/

Вот еще демо, что не имеет ошибки консоли: http://davidwesleymartin.com/animtest/index.html

Все анимации устанавливаются в CSS (с помощью @keyframe, свойств анимации).

Анимация работает на загрузке страницы, но ведет себя странно, когда я пытаюсь изменить их после щелчка ссылки. Я пытаюсь отменить их, сбросив свойство 'анимация-направление', когда класс завершения ('is-exiting') добавляется в основной контейнер после щелчка ссылки.

Единственный способ, которым я могу заставить это работать, - установить значение NEW для «анимации-имени», если это то же значение, что и раньше, оно не работает.

Соответствующие 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> 

Соответствующий CSS (примечание: все правильно приставкой на демо, что это не проблема):

@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

Это работает для меня.

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

Но jsfiddle демо сломана. Я думаю, вам нужно указать страницу для загрузки в href.

Это работает.

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

Не работает.

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

Дело в том, связанная страница имеет #main элемент или нет. Я думаю, что это своего рода ошибка в smoothState.js. Ошибка произошла в этой строке для меня, когда вы находите элемент #id.

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

UPDATE

Чтобы перезапустить CSS3 анимацию, вам необходимо перерисовать элемент. более

информация: 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/