2016-11-18 2 views
0

Meteorを使用しているWebサイトで作業しています。ページの1つでは、上部の画像やdivをアニメーション化してページに載せたいと思います。 私は追加することによって、これを達成した:Meteorで別のテンプレートをレンダリングするときにクラスを削除する方法

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'); 
}; 

私は流星1.2.0.1を使用していますし、また鉄ルータを使用しています、クラスを追加および削除するソリューションを見つけることができませんでした。どんな提案も感謝しています!

+0

i-r onAfterActionでDOMを操作する方法については、http://stackoverflow.com/a/32812777/2805154を参照してください。 –

答えて

0

私はテンプレートの負荷に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'); 
     }); 
    }); 
    }); 
}); 

流星シェフは、負荷パターンhereに大きなリソースを持っています。

関連する問題