सीएसएस एनिमेशन, एनीमेशन-नाम, smoothstate.js

Question

smoothstate.js के साथ कुछ पेज संक्रमणों को एनिमेट करने का प्रयास कर रहा है, और मैं एक बाधा में हूं।

यहां एक jsfiddle है, लेकिन यह एक कंसोल त्रुटि फेंक रहा है जिसे मैं विकसित करते समय प्राप्त नहीं कर रहा हूं। हालांकि आप अभी भी सीएसएस मुद्दा देख सकते हैं मैं के बारे में बात कर रहा हूँ: http://davidwesleymartin.com/animtest/index.html

सभी एनिमेशन (@keyframe, एनीमेशन गुण के माध्यम से सीएसएस में सेट कर रहे हैं: http://jsfiddle.net/3f5wp9xL/6/

यहाँ एक और डेमो, कि कंसोल त्रुटि नहीं है है)।

एनिमेशन पृष्ठ लोड पर काम करते हैं, लेकिन जब मैं एक लिंक क्लिक करने के बाद उन्हें उलटा करने की कोशिश करता हूं तो अजीब व्यवहार कर रहा हूं। जब मैं एक लिंक क्लिक करने के बाद मुख्य कंटेनर में निकास वर्ग ('बाहर निकलना') जोड़ा जाता है तो मैं 'एनीमेशन-दिशा' संपत्ति को रीसेट करके उन्हें उलट करने की कोशिश कर रहा हूं।

एकमात्र तरीका यह है कि मैं इसे काम करने के लिए प्राप्त कर सकता हूं 'एनीमेशन-नाम' के लिए एक नया मान भी सेट कर रहा है, यदि यह वही मान है जैसा कि पहले था, यह काम नहीं करता है।

प्रासंगिक 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> 

प्रासंगिक सीएसएस (टिप्पणी: सब कुछ ठीक से प्रदर्शन पर पहले से जुड़ा हुआ है, कि नहीं मुद्दा है):

@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

अद्यतन

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

सीएसएस

#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/