webtempest/meteor-animate

Easily perform CSS3 animations and transitions in Meteor.

meteor-animate's Issues

if/else works but if alone not working

the longMessage helper workers properly but when the showContent helper is true the item just appears - it doesn't do an animation, and if I set showContent to false the content doesn't remove its self from the display and then when showContent is true again the content is duplicated.

  <div class="row z-depth-1" style="background-color: white; margin-top: 0; padding: 10px 2px;">
    {{#transition in="fadeIn:1500" out="fadeOut"}}
      {{#if longMessage}}
        <div class="center">
          <h1 style="text-align: center;">
            Welcome to the Engine
          </h1>
          <a id="showContent" class="btn" style="">Create your Admin Account</a>
        </div>
      {{else}}
        <h1 style="text-align: center;">
          Welcome
        </h1>
      {{/if}}
    {{/transition}}
  </div>
  <div class="row">
    <div class="col s12 m6 offset-l2 l4">
      {{#transition in="flipInLeft:1500" out="flipOutRight"}}
        {{#if showContent}}
          {{> rcSidebar}}
        {{/if}}
      {{/transition}}
    </div>
    <div class="col s12 m6 l4">
      {{#transition in="flipInRight:1500" out="flipOutLeft"}}
        {{#if showContent}}
          {{> rcSidebar}}
        {{/if}}
      {{/transition}}
    </div>
  </div>

Animation in a click event?

How can i make an animation in a click event?

            <button class="sort">Sort</button>

                {{#transition in="bounceInLeft" out="bounceOut"}}
                {{#each items}}
                        <li class="animated out">{{> Item }}</li>
                {{/each}}
                {{/transition}}

Package without bundled animate.css

I like this package, but I already included animate.css in my application using the SASS version - which gives better control about which animations are actually included, and thus allows me to reduce the file sizes for my mobile app. So I would like to recommend to split this package in two: one for the Meteor side of the implementation, and one for the base animate.css file.

One type of animation at a time?

Here you can apply different animations to different elements at the same time?

Animations on mobile

Mobile animations don't appear to be working correctly (iOS Safari).

New element moved to the end of the list

It seems that your code is rearranging/moving any new element in a list to the end even the subscription is sorting it the other way around.

Subscription:

//...
return {posts: Posts.find({},{sort:{timestamp: -1}})}
//...

Consumer:

    {{#transition in="flipInX" out="flipOutX"}}
      {{#each posts}}
          <div>
        {{message}}
          </div>
      {{/each}}
    {{/transition}}

Everything is fine again once I remove the transition.

Thanks for your really cool package!

Triggering static animations

In the example, and documentation, static animations only 'animate' when they're first rendered. Is there a way to trigger an animation in response to an event? Say, for example, if I want to apply an in-place shake to incorrectly filled out form fields and when the user clicks the button, the invalid fields animate. Is there a way to do this? Or should I just 'blink' something else to trigger it?

Please add a license so that others can use this package

Could you please add a license so that others can use this package? Thanks

Does the animation happen after the document is removed form Mongo?

If I add these animations to some list tiems and remove an item from the list, does the animation occur after confirmation has come back from Mongo that the document rmeoval was successfull?

reactjs

Awesome, awesome plugin. Anyone love for reactjs + meteor (& flow router)? :)

Interfering with onRendered function

I need to run a resize() function which adds a style="height:Xpx" to a div.

This package works really nicely (thanks!) but it also interferes with this function:

Template.companyTweets.onRendered(function() {
	this.autorun(() => {
			resize();
		});
});

The style is no longer applied if I use the package?

Speeding Up Animations?

What's the best way to time these transitions/animations? Should I force-edit the CSS classes of my respective animations or is there a way to implement that on the API of the package? Basically, my zoomIn and zoomOut transitions are just a tad too slow.