Add a simple animation

1

I tried adding npm install animate.css --save

Template.Item.events({
    'click .sort'() {

        $('#sort').addClass('animated bounce')

        instance.sortOrder.set(instance.sortOrder.get() * -1)
    }
})

Why doesn’t the animation work?

The only animation i could use is with Meteor Animate, but i don’t see how i could use it in this simple case.

2

Are you importing the animate.css file from the installed animate.css package? For example, add the following import to the top of your Template:

// This will import the animate.css file from the /node_modules/animate.css/ 
// package location
import 'animate.css/animate.css';
...
Template.Item.events({
...
1 Like
3

I tried it, and nothing is happening. I have the package in node_modules/animate.css

import 'animate.css/animate.css';

Template.Items.events({
    'click .sort'(event, instance) {
         $('#sort').addClass('animated bounce')
        instance.sortOrder.set(instance.sortOrder.get() * -1)
    }
4

In your event, it looks like your listener is setup to listen for a click on an element with a class of sort, but then you’re adding the animation class to an element with an id of sort. Is this accurate? Does your element look something like:

... id="sort" class="sort" ...

or did you mean to use the same class or id in your listener definition and jQuery reference lookup?

1 Like
5

Yes i was only using the class for click event and i forgot all about the id. Added id and it works.