javascript - Animation angularjs not working -


i'm trying animate div on click. when click on link div should appear , div clicked disappear. made example here:

http://plnkr.co/edit/703244uj0hcg9gjkojoz?p=preview

by way code:

 <a class="" ng-click="showdetails" ng-if="!showdetails">         expand      </a>     <div class="animate-if" ng-if="showdetails">    details!!   <a style="cursor:pointer;" ng-click="!showdetails">       close   </a>   </div>    {{showdetails}} </body>

angular

var app = angular.module('plunker', ['nganimate']);  app.controller('mainctrl', function($scope, $window) {  showdetails = false;  });

css:

.animate-if.ng-enter, .animate-if.ng-leave {   -webkit-transition: 1s linear all;   -moz-transition: 1s linear all;   -ms-transition: 1s linear all;   -o-transition: 1s linear all;   transition: 1s linear all; } .animate-if.ng-enter {   max-height: 0;   opacity: 0; } .animate-if.ng-enter.ng-enter-active {   max-height: 999px;   opacity:1; } .animate-if.ng-leave {   max-height: 999px;   opacity:1; } .animate-if.ng-leave.ng-leave-active {   max-height: 0;   opacity:1; }

so, when click "expand" should appear div class: animate-if , disappear one: 

<a class="" ng-click="showdetails" ng-if="!showdetails">         expand      </a>

then, when click close should disappear div : animate-if , re-appear link "expand" again. of course using animation. not working. not appears or disappears.

you need toggle function toggle value of showdetail variable on click expand div.

js : 

var app = angular.module('plunker', ['nganimate']);  app.controller('mainctrl', function($scope, $window) {  $scope.showdetails = false;  $scope.toggledetails =function (){    $scope.showdetails = !$scope.showdetails;    } });

html : 

<body ng-controller="mainctrl">    <a class="" ng-if="!showdetails" ng-click="toggledetails()">         expand      </a>   <div class="animate-if" ng-if="showdetails">     details!!   <a style="cursor:pointer;"  ng-click="toggledetails()">       close   </a>   </div>    {{showdetails}} </body>

demo


Comments

Post a Comment

Popular posts from this blog

IF statement in MySQL trigger -

this query code in mysql trigger. if 1=2 select 'yes'; else select 'no'; end if; but has following error: if '1'='2' select 'yes' error code: 1064. have error in sql syntax; check manual corresponds mysql server version right syntax use near 'if '1'='2' select 'yes'' @ line 1 0.000 sec what solution?
Read more

c++ - What does MSC in "// appease MSC" comments mean? -

i run across // appease msc in c++ comments, e.g. here : const int& array::operator[](int offset) const { int mysize = getitssize(); if (offset >= 0 && offset < getitssize()) return ptype[offset]; throw xboundary(); return ptype[offset]; // appease msc! } what msc stand ? the author means microsoft's compiler, more formally known msvc.
Read more

javascript - Blogger related post gadget image Resize s72-c [ Need Expert Help ] -

i run blogger blog , use follow code javascript code (requires no jquery) show related post labels/categories of post. <script type='text/javascript'> var defaultnoimage=&quot;http://1.bp.blogspot.com/-m72rpguntq0/vuokijudn_i/aaaaaaaaboi/lq18sceunsg/w72/favicon-tik.png&quot;; var maxresults=16; var splittercolor=&quot;#d4eaf2&quot;; var relatedpoststitle=&quot;related posts&quot;; </script> <script type='text/javascript'>//<![cdata[ var relatedtitles = new array(); var relatedtitlesnum = 0; var relatedurls = new array(); var thumburl = new array(); function related_results_labels_thumbs(json) { (var = 0; < json.feed.entry.length; i++) { var entry = json.feed.entry[i]; relatedtitles[relatedtitlesnum] = entry.title.$t; try { thumburl[relatedtitlesnum] = entry.media$thumbnail.url } catch (error) {...
Read more