css animasyonlar,

Question

smoothstate.js ile bazı sayfa geçişleri animasyon sağlamaya çalışmak ve ben çıkmazda olduğum smoothstate.js. İşte

bir jsfiddle, ama geliştirirken ben alamıyorum bir konsol hatası atıyor. http://davidwesleymartin.com/animtest/index.html

Tüm animasyonlar @keyframe, animasyon özellikleri aracılığıyla (CSS ayarlanır: Burada

http://jsfiddle.net/3f5wp9xL/6/ konsol hatası yok başka bir tanıtım, var: Hâlâ i bahsediyorum css sorunu görebilirsiniz Ancak).

animasyonlar sayfa yüklemesinde çalışır, ancak ben bir bağlantı tıklandığında sonra bunları tersine çevirmeye çalışırken garip davranıyor. Bir bağlantı tıklandıktan sonra ana kapsayıcıya bir çıkış sınıfı ('çıkılıyor') eklendiğinde, 'animasyon-yön' özelliğini sıfırlayarak bunları ters çevirmeye çalışıyorum. Bu aynı değer daha önce olduğu gibi çalışmıyor ise bu işe alabilirsiniz

tek yolu, aynı zamanda 'animasyon-name' YENİ bir değer ayarlayarak gereğidir.

İlgili 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> 

İlgili CSS (not: her şeyin düzgün demo öneki, yani sorun değil):

@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

Bana uyar.

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

Ama jsfiddle demo bozuldu. href'da yüklenecek sayfayı belirtmeniz gerektiğini düşünüyorum.

Çalışıyor.

Çalışmıyor.

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

nokta bağlantılı sayfa #main elemanı vardır ya yoktur. Bence bu smoothState.js'nin bir hatayı. Hata, bu satırda benim için bir #id öğesi bulunurken oluştu.

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

GÜNCELLEME

css3 animasyon yeniden başlatmak için, öğesini yeniden çizmek gerekir.

fazla bilgi: 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/