0

I have two <div>'s that users toggle between them with a checkbox. if the checkbox is checked, the first <div> is open. if the checkbox is unchecked, the second <div> should be shown.

The thing is this has to happen in animation, and specifically the closing animation must happen first, and only when it's done, the opening animation should start

here is the idea without animation: http://jsfiddle.net/HB7LU/11597/

<div ng-controller="Ctrl">
    <div class="first" ng-show="first"></div>
    <p><input type="checkbox" ng-model="first" />First open</p>
    <div class="second" ng-show="!first"></div>
</div>


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

myApp.controller('Ctrl',['$scope' ,function($scope) {
    $scope.first = true;
}])
scniro
  • 16,844
  • 8
  • 62
  • 106
Moshe Shaham
  • 15,448
  • 22
  • 74
  • 114
  • Have you done any research? Have you seen [this](https://docs.angularjs.org/api/ngAnimate/service/$animate) – VeldMuijz Mar 09 '15 at 14:36
  • @VeldMuijz yes, I can animate one div, but I don't know how to animate the second when the first one finishes – Moshe Shaham Mar 09 '15 at 14:38
  • The page states `$animate.enter(element, container).then(function() { //...this is called once the animation is complete... });` So animate the second one within the then function. And create two of these functions (one for your first component and 1 for your second) – VeldMuijz Mar 09 '15 at 14:43

0 Answers0