2014-09-20 21 views
5

Próbujesz animować niektóre przejścia stron z smoothstate.js, a ja jestem w impasie.Animacje css, nazwa-animacji, smoothstate.js

Oto jsfiddle, ale rzuca błąd konsoli, którego nie otrzymuję podczas pracy. Jednak nadal można zobaczyć kwestię css mówię: http://jsfiddle.net/3f5wp9xL/6/

Oto kolejna demonstracja, że ​​nie ma błędu w konsoli: http://davidwesleymartin.com/animtest/index.html

Wszystkie animacje są ustawione w CSS (przez @keyframe, właściwości animacji).

Animacje działają na ładowanie strony, ale zachowują się dziwnie, gdy próbuję odwrócić je po kliknięciu łącza. Próbuję odwrócić je przez zresetowanie właściwości 'direction-animacji', gdy klasa wyjścia ("is-exiting") zostanie dodana do głównego kontenera po kliknięciu łącza.

Jedynym sposobem, w jaki mogę to zrobić, jest ustawienie wartości NEW dla "nazwa-animacji", jeśli jest to ta sama wartość, co poprzednio, nie działa.

Stosowna 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> 

Stosowna CSS (uwaga: wszystko jest prawidłowo prefiksem na demo, które nie jest problem):

@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; 
} 
+0

Czy należy umieścić kod demo w jsfiddle, osadzony w sobie, lub coś podobnego pytanie? Pomoże ci to nieco wcześniej –

+0

W porządku, dodałem demo na jsfiddle – davidwmartin

+1

jsfiddle jest pusty?Naprawiono – Sunand

Odpowiedz

2

To działa na mnie.

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

Ale jsfiddle demo jest zepsuty. Myślę, że musisz określić stronę do załadowania w href.

Działa.

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

To nie działa.

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

Chodzi o to połączona strona ma #main elementu lub nie. Myślę, że jest to rodzaj błędu w wersji smoothState.js. Błąd pojawił się w tym wierszu dla mnie, to jest podczas znajdowania elementu #id.

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

UPDATE

Aby ponownie animacji CSS3, trzeba przerysować element.

więcej info: 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/

+0

Niestety, moje pytanie mogło nie być jasne. Animacja składa się z 2 etapów: 1. Podczas ładowania strony (pasek boczny się powiększa, główna treść przychodzi od lewej) 2. Po kliknięciu łącza (elementy mają odwrócić animację wejściową). (2) jest to, co nie działa poprawnie. Po demo na stronie: http://weblinc.github.io/jquery.smoothState.js/typical-implementation.html Powinno to nastąpić po prostu przez zmianę właściwości kierunku animacji, gdy "is-exiting" jest stosowane do głównego div. Tak się nie stanie, chyba że zadeklaruję nową animację, która jest INNA od oryginału. – davidwmartin

+0

W ten sposób zawartość główna animuje się, ale pasek boczny nie. (tj. wartość "nazwa-animacji" zastosowana przy wyjściu jest nowa dla części głównej, ale nie dla paska bocznego: – davidwmartin

+0

to pomoże ci: http://css-tricks.com/restart-css-animation/ – kechol

Powiązane problemy