Работа со сложными анимациями на Blaze

Question

Я действительно ищу хороший способ играть в анимацию в контексте моего приложения с помощью 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> 

Давайте предположим, что мы получили Iron-маршрутизатор маршрут, придающие global шаблона. В этом конкретном рендере (от «navigate») Я хочу, чтобы каждый шаблон отображался с помощью fadeIn.

При нажатии на кнопку btnAdd создается новый элемент. Хотел бы это сделать с эффектом SlideInLeft.

При нажатии на кнопку btnDel элемент удаляется. Я бы хотел, чтобы он был разрушен с эффектом SlideOutRight.

Когда пользователь переходит к другому маршруту, я хочу, чтобы все шаблоны исчезли с эффектом fadeOut.

Каждая из моих попыток до сих пор не позволяла мне делать такое различие ... Я не мог найти пакет, разрешающий эту проблему.

Я на самом деле просто играть анимацию путем добавления/удаление Animate.css класса (очень простого в использовании и красивая!)

Чтобы возобновить, я хочу другую анимация играла в зависимости от источника рендеринг.

Неужели кто-то уже сталкивался с этой проблемой?

БОНУС ВОПРОС: Вы знаете, как цепь анимации, как:

визуализации с глобальным FadeIn Effect >> затем >> визуализации Foo с rotateIn Effect >> затем >> оказывать всяческое бар с bounceIn эффектом

Answer 1

Для выбора времени вы можете использовать Meteor.setInterval. Например, вы можете сделать $('.elementClass').hide('fast') за пределами setInterval. Он будет работать первым, и 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 
}) 

Вы также можете использовать JQuery в вашем router.js, используя железо: маршрутизатор.

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