Css animations, name animation, smoothstate.js

Question

Trying to bring some transitions to the page with smoothstate.js alive , and I'm at a dead end.

Here's jsfiddle, but it throws a console error that I don't get during development. However, you can still see the css issue I'm talking about: http://jsfiddle.net/3f5wp9xL/6/

Here's another demo that doesn't have a console error: http://davidwesleymartin.com/animtest/index.html

All animations are set in CSS (via @keyframe, animation properties).

Animations work with page loading, but they behave strangely when I try to change them after clicking a link. I try to cancel them by resetting the 'animation-direction' property when the completion class ('is-exiting') is added to the main container after clicking the link.

The only way I can get this to work is to set the NEW value to the "animated name", if it is the same value as before, it does not work.

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

Corresponding CSS ( note : everything is correctly prefixed on the demo, this is not a 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; } 

Answer 1

This works for me.

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

But jsfiddle daemon is not working. I think you need to specify the page to load in href .

He works.

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

This does not work.

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

Point - This linked page has the #main element or not. I think this is kind of a bug in smoothState.js. An error occurred on this line for me when you find the #id element.

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

UPDATE

To restart the css3 animation, you need to redraw the element.

Additional information: 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/