Question

我正在使用Meteor / Blaze构建一个Web应用程序并拥有一系列模板。在我的一个模板中，我想设置顶部导航栏的动画，而不是在包含坏的任何其他模板中发生该动画。

我想在我的仪表板页面中使用关键帧动画。我使用动画的最佳方式是什么，然后在onDestroy中删除它或者不在任何其他模板中使用它？

我尝试使用jQuery，但我相信我使用的语法是不可能的。这是我的代码。

Template.Dashboard_page.onCreated(function homePageOnCreated() {

    $('.main-nav').css('animation' , 'navSlide 0.3s');

};
Template.Dashboard_page.onCreated(function homePageOnDestroyed() {

        $('.main-nav').css('animation' , '');

    };

    .main-nav {
      //css for the top bar
      }

    @keyframes navSlide{
      from {
      transform: translateY(-25%);
     }
      to {
      transform: translateY(0);
    }
  }

所以我尝试做的是在创建仪表板模板时，使用.css（）添加动画，然后在销毁它时使用相同的方法将其删除。

这适用于其他CSS属性，例如背景颜色，高度等。但不适用于动画＆＃39;。

有人可以帮助我找到更好的解决方案吗？

使用jQuery将关键帧动画添加到模板的最佳方法是什么？

0 个答案: