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;
}
Czy należy umieścić kod demo w jsfiddle, osadzony w sobie, lub coś podobnego pytanie? Pomoże ci to nieco wcześniej –
W porządku, dodałem demo na jsfiddle – davidwmartin
jsfiddle jest pusty?Naprawiono – Sunand