This is simple to do if we don't mind blatantly violating MVC, but since I'm trying to learn to play nice with angular, I've been tearing my hair out on innocuous little things like this.
All I want is for div#thisShouldFade
to fade out when a new thing is chosen, then fade in with the new data.
here's the html:
<body ng-app="MyApp">
<div ng-controller="MyController as myCtrl">
<select ng-model="myCtrl.currentThing" ng-options="object.name for object in myCtrl.things">
<option value="">--choose a thing--</option>
</select>
<div id="thisShouldFade">{{myCtrl.currentThing.data}}</div>
</div>
</body>
and the javascript:
angular.module("MyApp", [])
.controller("MyController", function(){
this.things = [
{ name: "Thing One", data: "This is the data for thing one" },
{ name: "Thing Two", data: "This is the data for thing two" },
{ name: "Thing Three", data: "This is the data for thing three" }
];
this.currentThing = null;
})
and the plunk:
http://plnkr.co/edit/RMgEOd6nrT9lFQlslDR0?p=preview
I've tried a bunch of different approaches using ngAnimate to set classes with CSS transitions, but the fundamental problem seems to be that the model is changing instantly because it's bound to the SELECT
.
Anyone have a good angular-iffic strategy? I'd prefer to leave jQuery on the sidelines. That said, here's a jQuery plunk which shows the desired effect:
Here is a hacky way of getting your desired effect using transition delays and an
ng-repeat
. It is somewhat imperfect because there is a delay when going from no selection to selection equal to the transition delay: