CODEWITHSUNDEEP
javascriptangularjsanimation
rg88
rg88

Reputation: 20977

Angular: combine animation with a scope change

Just want to see some code? Here you go: some code

My question is, using Angular how do I combine a change in some data on the page, triggered by a click, with a fade in/fade out animation?

I can have a click change content and I can have a click animate but I don't seem to be able to get the two to work together.

Specifically, I want a click that changes a character to the next one in a list but I want the characters to fade in and out as they swap, rather than simply change in place.

Here is a plunk demonstrating the two behaviors functioning separately. Check it out and if you can suggest how to make the characters swap with a fade in/fade out rather than their current instant change I will be eternally grateful.

Upvotes: 2

Views: 596

Answers (1)

Fresheyeball
Fresheyeball

Reputation: 30025

What you want is a non-standard (not part of the ng-animate paradigm) animation in angular. I recommend writing a simple directive. Ultimately you need to $watch for the change and then fire animation code. Because animation code is dom manipulation, it belongs in a directive. Consider an implementation of your directive that would look something like this:

  <div cross-fade="currentchar" ></div>

Such a directive, could also leverage your existing .animation script via $animator

Upvotes: 1

Related Questions