CSS 애니메이션, 애니메이션 이름, smoothstate.js

Question

일부 페이지 전환을 smoothstate.js으로 움직이기 위해 노력 중이며 난처함에 처해 있습니다.

여기 jsfiddle가 있지만 개발 중에 콘솔 오류가 발생합니다. http://davidwesleymartin.com/animtest/index.html

모든 애니메이션이 @keyframe, 애니메이션 속성을 통해 (CSS에서 설정 : 다음

http://jsfiddle.net/3f5wp9xL/6/ 콘솔 오류가없는 다른 데모 : 당신은 아직도 내가 이야기하고있는 CSS의 문제를 볼 수 있습니다 그러나).

애니메이션은 페이지로드에서 작동하지만 링크를 클릭 한 후 애니메이션을 되돌리려 고하면 이상하게 작동합니다. 링크를 클릭 한 후 종료 클래스 ('is-exiting')가 주 컨테이너에 추가 될 때 '애니메이션 방향'속성을 재설정하여이를 취소하려고합니다.

이 방법을 사용할 수있는 유일한 방법은 'animation-name'의 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/