在Blaze上處理複雜的動畫

我實際上正在尋找一種在我的應用上下文中播放動畫的好方法，使用Blaze。在Blaze上處理複雜的動畫

更明確的，我寫了這個超級簡單的例子：

<template name="global"> 
    <h1>Hi guys!</h1> 
    {{> foo}} 
</template> 

<template name="foo"> 
    <h2>I'm a foo!</h2> 
    <ul> 
    {{#each elements}} 
     {{> bar}} 
    }} 
    </ul> 

    <button name="btnAdd">Add new elem</button> 
    <button name="btnDel">Delete an elem</button> 
</template> 

<template name="bar"> 
    <li>{{name}}</li> 
</template>

讓我們假設，我們得到這使global模板的鐵路由器路線。在這個特定的渲染（從「導航」），我希望每個模板呈現fadeIn。

點擊btnAdd按鈕，創建一個新元素。我希望它會呈現與SlideInLeft的效果。

當點擊btnDel按鈕時，會刪除一個元素。我希望它會被SlideOutRight破壞。

當用戶導航到另一條路線時，我希望所有模板消失fadeOut效果。

到目前爲止，我的每一次嘗試都不會讓我做這種區分...我找不到解決此問題的任何包。

我其實只是添加/刪除Animate.css類播放動畫（使用非常簡單，好看！）

要恢復，我希望有一個不同的播放的動畫視的來源渲染。

有人已經遇到過這個問題嗎？

獎金的問題：你知道鏈如何動畫，如：

使全球與淡入效果>>然後>>渲染rotateIn影響FOO >>然後>>渲染bounceIn效果

每欄

來源

2016-04-21 Julien Leray

你已經看到了嗎？ https://github.com/webtempest/meteor-animate – Kalman

@Kalman：是的，這並不能解決問題，它不允許在不同的上下文中選擇動畫，它只會在每次綁定元素被渲染時播放 –

對於計時，您可以使用Meteor.setInterval。例如，您可以在setInterval之外執行$('.elementClass').hide('fast')。它將首先運行，並且setInterval將在您需要時運行。

對於最初的效果，你可以使用：

Template.templateName.onRendered(function(){ 
    $('.elementClass').fadeIn('fast') //note that element is initially hidden (display:none in CSS). you can use effects from jquery and jquery-ui for more effects. You have to add jquery-ui additionally 
})

你也可以在你的router.js使用jQuery，使用鐵：路由器。

Router.route('/the-url', function() { 
    this.render('templateName', { 
     data: function() { 
      $('.htmlElement').toggle('slide', {direction:'right'}, 200); //note that the element is initially invisible 
     } 
    }); 
}, { 
    name: 'routeName' 
});

來源

2016-04-26 03:29:45 Luna

Yep這個答案是對獎金問題的回答（我知道我可以用setInterval來完成，但也許可以用其他方式來完成））。無論如何，謝謝，但這並不能解決主要問題... –

@JulienLeray我認爲它確實如此。你可以用onRendered添加任何你想要的效果，或者你可以在你的路線中使用jQuery。另外，你可以通過事件做任何你想要的效果。例如，您單擊，它會產生所需的效果，然後刪除文檔。 – Luna

如果您不知道如何編寫它，請告訴我，我將編輯我的問題。 – Luna

在Blaze上處理複雜的動畫

回答

相關問題