尝试使用 smoothstate.js 为一些页面转换设置动画,我陷入了僵局。
这是一个 jsfiddle,但它抛出了一个我在开发时没有遇到的控制台错误。但是您仍然可以看到我正在谈论的 css 问题:http://jsfiddle.net/3f5wp9xL/6/
这是另一个没有控制台错误的演示:http://davidwesleymartin.com/animtest/index.html
所有动画都在 CSS 中设置(通过@keyframe,动画属性)。
动画在页面加载时起作用,但当我尝试在单击链接后反转它们时,它们表现得很奇怪。当单击链接后将退出类 ('is-exiting') 添加到主容器时,我试图通过重置 'animation-direction' 属性来反转它们。
我能让它工作的唯一方法是同时为“动画名称”设置一个新值,如果它与之前的值相同,它就不起作用。
相关的 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>
相关 CSS(注意:演示中的所有内容都已正确添加前缀,这不是问题所在):
@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;
}
最佳答案
它对我有用。
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);
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; }
关于jquery - css 动画,动画名称,smoothstate.js,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25954294/