Question

我正在使用Meteor的网站上工作。在其中一个页面上，我希望顶部的一些图像和div可以在页面上进行动画处理。我通过添加：

来实现这一目标

Template.home.rendered=function(){
    $('.animateblock').addClass('animated');
};

添加的类会更改某些css属性，从而为我提供所需的效果。

我遇到的问题是，如果我访问网站的其他页面，然后使用动画重新访问该页面，则不会重置。该课程只添加一次，而且当我访问另一个页面时，我还没有找到将其删除的方法。

我的HTML代码如下：

<div class="textAnimate animateblock">
  <img src="/home/100.png" class="animateblock percent100" alt="100%">
  <img src="/home/antibiotics.png" class="animateblock antibiotic" alt="Antibiotic Free">
  <img src="/home/natural.png" class="animateblock natural" alt="All Natural">
  <div class="horomoneAnimateContainer">
     <div class="animateblock horomoneAnimate">
     <img src="/home/horomone.png" class="horomone" alt="Horomone Free">
     </div>
  </div>
</div>
<div class="stampAnimate animateblock">
  <img src="/home/tasty-stamp.png" class="tasty" alt="Tasty Certified">
</div>

我尝试了一些不同的方法，比如在addClass之前添加一个removeClass，希望能解决它，但事实并非如此。

Template.home.rendered=function(){
    $('.animateblock').removeClass('animated');
    $('.animateblock').addClass('animated');
};

我也尝试过像这样创建一个Template.destroyed部分，但这也不起作用：

Template.home.destroyed=function(){
    $('.animateblock').removeClass('animated');
};

我正在使用Meteor 1.2.0.1并且还在使用铁路由器，但是还没有找到一个解决方案来添加和删除类。任何建议都表示赞赏！

Answer 1

我做这样的事情来在模板加载中调用jQuery：

Template.Messages.onCreated(function() {
  var self = this;
    self.autorun(function() {
    self.subscribe('messageDB', function() {
      $('.loader').delay(300).fadeOut('slow', function() {
        $('.transition-wrapper').delay(200).fadeIn('slow');
      });
    });
  });
});

Meteor Chef在加载模式here方面拥有丰富的资源。

如何在Meteor中呈现不同的模板时删除类

1 个答案: