Angular - animate ng-show

Question

I've this simple HTML markup using Angular and Bootstrap:

Toggle panel: <input type="checkbox" ng-model="toggle"><br/>
<br/>
<div class="container">
    <section id="content">
        <div class="panel panel-default animate-show" ng-show="toggle">                
            <div class="panel-heading">
                <h3 class="panel-title">Panel title1</h3>
            </div>        
            <div class="panel-body">        
                Content1        
            </div>
        </div>        
        <div class="panel panel-default animate-show" ng-hide="toggle">                
            <div class="panel-heading">
                <h3 class="panel-title">Panel title2</h3>
            </div>        
            <div class="panel-body">        
                Content2        
            </div>
        </div>
        <div class="panel panel-default">                
            <div class="panel-heading">
                <h3 class="panel-title">Panel title3</h3>
            </div>        
            <div class="panel-body">        
                Content3  
            </div>
        </div>
    </section>
</div>

And this small Angular controller:

function MainController($scope) {
  $scope.toggle = true;
}

See this JSFiddle: http://jsfiddle.net/dennismadsen/1hr9q1ra/1/.

How can I add animations on the panels when they are shown/hidden?

Here is sample of how to use it https://docs.angularjs.org/guide/animations — Jenish Rabadiya, Mar 02 '15 at 13:47
It does not seem to work http://jsfiddle.net/dennismadsen/1hr9q1ra/3/. What am I missing? — dhrm, Mar 02 '15 at 14:06

score 2 · Accepted Answer · answered Mar 02 '15 at 14:13

2

I made it work here.

A few words though - I changed the angular version to 1.3 since I used ng-animate module.

Basically just added this css:

.panel {
  padding:10px;
  border:1px solid black;
  background:white;
}

.panel {
  -webkit-transition:all linear 0.5s;
  transition:all linear 0.5s;
}

.panel.ng-hide {
  opacity:0;
}

And a very slight modification here:

var app = angular.module("myApp", ['ngAnimate']);

function MainController($scope) {
  $scope.toggle = true;
}

app.controller("MainController", MainController);

answered Mar 02 '15 at 14:13

Omri Aharon

16,959
5
40
58

http://jsfiddle.net/dennismadsen/1hr9q1ra/5/. Is there a way to make the transition less buggy? – dhrm Mar 02 '15 at 14:17
@DennisMadsen Define less buggy :) How do you expect it to behave? – Omri Aharon Mar 02 '15 at 14:20
Instead of fading out and go from full height to disappear when the tranition is done, I think more like a accordion, where the content is shrinking during the transition. – dhrm Mar 02 '15 at 14:32
@DennisMadsen Well I'm guessing it's possible, just need to play with some of the CSS for find how to do that shrinkage you want. No CSS expert myself just yet. – Omri Aharon Mar 02 '15 at 14:50

Angular - animate ng-show

1 Answers1