CSS动画，动画名称，Smoothstate.js

Question

CSS动画，动画名称，Smoothstate.js

jquerycssjquery-pluginscss-transitionscss-animations

5

尝试使用smoothstate.js实现页面过渡动画，但目前进展不佳。这里有一个jsfiddle，但它会抛出控制台错误，而我在开发时没有遇到这个问题。但你仍然可以看到我所说的CSS问题：http://jsfiddle.net/3f5wp9xL/6/。这是另一个演示，没有控制台错误：http://davidwesleymartin.com/animtest/index.html。所有动画都在CSS中设置（通过@keyframe、animation属性）。这些动画在页面加载时有效，但在尝试在链接被点击后将它们反转时表现奇怪。我正在尝试通过在添加“is-exiting”退出类到主容器后重置“animation-direction”属性来将其反转。

唯一让这个生效的方法是同时设置一个新的“animation-name”值，如果与之前相同，它将无法工作。

相关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;
}

- davidwmartin

你能否把演示代码放在一个jsfiddle中，嵌入到问题本身或类似的地方吗？这样会更容易帮助你。 - Zach Saucier

好的，我在 jsfiddle 上添加了一个演示。 - davidwmartin

修复了。这就是我在喝醉的情况下调试 jsfiddling 的结果。 - davidwmartin

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- kechol · Accepted Answer

对我来说它有效。

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

但是 jsfiddle 示例已经损坏了。我认为你需要在 href 中指定要加载的页面。

它有效。

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

它不起作用。

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

重点是链接页面是否有#main元素。我认为这可能是smoothState.js的一个bug。对我来说，错误发生在寻找#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; }

http://jsfiddle.net/jewmmqoa/2/