javascript - How can I fade out/in a view based on a SELECT change? -
this simple if don't mind blatantly violating mvc, since i'm trying learn play nice angular, i've been tearing hair out on innocuous little things this.
all want div#thisshouldfade fade out when new thing chosen, fade in new data.
here's html:
<body ng-app="myapp"> <div ng-controller="mycontroller myctrl"> <select ng-model="myctrl.currentthing" ng-options="object.name object in myctrl.things"> <option value="">--choose thing--</option> </select> <div id="thisshouldfade">{{myctrl.currentthing.data}}</div> </div> </body> and javascript:
angular.module("myapp", []) .controller("mycontroller", function(){ this.things = [ { name: "thing one", data: "this data thing one" }, { name: "thing two", data: "this data thing two" }, { name: "thing three", data: "this data thing three" } ]; this.currentthing = null; }) and plunk:
http://plnkr.co/edit/rmgeod6nrt9lfqlsldr0?p=preview
i've tried bunch of different approaches using nganimate set classes css transitions, fundamental problem seems model changing instantly because it's bound select.
anyone have angular-iffic strategy? i'd prefer leave jquery on sidelines. said, here's jquery plunk shows desired effect:
here hacky way of getting desired effect using transition delays , ng-repeat. imperfect because there delay when going no selection selection equal transition delay:
angular.module("myapp", ['nganimate']) .controller("mycontroller", function() { this.things = [{ name: "thing one", data: "this data thing one" }, { name: "thing two", data: "this data thing two" }, { name: "thing three", data: "this data thing three" }]; this.currentthing = []; }).animate { position: absolute; transition: 0.5s; } .animate.ng-enter { opacity: 0; } .animate.ng-enter-active { opacity: 1.0; transition-delay: 0.4s; -webkit-transition-delay: 0.4s; } .animate.ng-leave { opacity: 1.0; } .animate.ng-leave-active { opacity: 0; }<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.16/angular.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.16/angular-animate.min.js"></script> <body ng-app="myapp"> <div ng-controller="mycontroller myctrl"> <select ng-model="myctrl.currentthing[0]" ng-options="object.name object in myctrl.things"> <option value="">--choose thing--</option> </select> <div ng-repeat="thing in myctrl.currentthing" class="animate">{{thing.data}}</div> </div> </body>
Comments
Post a Comment