Best practice for repeated animation


#1

I’m new to ember.js (really loving it) and have run into a question that I’m not sure the answer to. I’m asking here because it feels like it is possibly a best practice rather than just a practical question about one specific implementation.

Basically I’m creating a login using simple-auth and when a user incorrectly enters their information I want the login form to shake via an animation. I’m currently using liquid-fire for transitioning but this isn’t really transitioning and it isn’t an if/else kind of thing or a model change. It is an event bubbling up that could happen multiple times in a row. Here’s what the code looks like in the controller:

export default Ember.Controller.extend(LoginControllerMixin, {
    authenticator: 'authenticator:local',
    actions: {
        authenticate: function() {
            var self = this;
            this._super().then(null, function(message) {
                self.set('errorMessage', message);
                // what to do now for animation?
            });
        }
    }
});

Things are fuzzy for me in two ways:

  1. I’m in a controller action, in a rejection of a promise, and need to make the template (or rather #login div on the template) animate.
  2. This could happen multiple times in a row, so it isn’t just setting a boolean to have liquid-fire create an animation. It would need to be unset and set again, which seems awkward.

From reading the docs, the controller should not know about the template, and I haven’t seen anywhere that I could access the template from the controller anyway. It seems like Views might be part of the solution, but I don’t think I understand Ember we’ll enough to be able to know what a correct way to do something like this would be.

Any advice on how best to tackle these types of animations would be greatly appreciated. I foresee that there will be other places in apps that I create where I want to have animations to indicate invalid user actions (that may or may not require communication with the server), and it seems like animations are starting to seep into ember from what I’ve been reading, and seeing liquid-fire’s creation just this year.