Text stacking on top each other as it is interchanged for different values Angular JS

Question

So when I press either buttons, the text should render in a fixed position. However, the text does render but it requires the closing animation of the previous text to finish before it takes the fixed position. The codes are as below:

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.9/angular.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/angular-animate.js"></script>
<div data-ng-app="myApp" data-ng-controller="myCtrl">
  <input type="button" value="Show A" data-ng-click="boolA()" />
    <input type="button" value="Show B" data-ng-click="boolB()" />
    <input type="button" value="Show C" data-ng-click="boolC()" />
    
    <div data-ng-show="bool.a" class="test">
        <h1>Picked A</h1>
    </div>
    <div data-ng-show="bool.b" class="test">
        <h1>Picked B</h1>
    </div>
    <div data-ng-show="bool.c" class="test">
        <h1>Picked C</h1>
    </div>
</div>

CSS

.test.ng-hide-add,.test.ng-hide-remove{
    transition:0.5s linear all;
    opacity:1;
}
.test.ng-hide{
    opacity:0;
}

JS

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

app.controller('myCtrl',function($scope){
    $scope.bool={
        a:false,
        b:false,
        c:false
    }
    $scope.boolA=function(){
        $scope.bool.a=true;
        $scope.bool.b=false;
        $scope.bool.c=false;
    }
    $scope.boolB=function(){
        $scope.bool.a=false;
        $scope.bool.b=true;
        $scope.bool.c=false;
    }
    $scope.boolC=function(){
        $scope.bool.a=false;
        $scope.bool.b=false;
        $scope.bool.c=true;
    }
});

Here is a JSFiddle implementation of what I have so far: link

Any tips is appreciated. Thanks for reading!

Answer 1

You need to use a parent div and set position: absolute to the .test divs, I also shortened your code a little:

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

app.controller('myCtrl', function($scope) {
  $scope.bool = {
    a: false,
    b: false,
    c: false
  }
    
  $scope.showBool = function(currKey){
    for(var key in $scope.bool){
      if(key === currKey) $scope.bool[key] = true
      else $scope.bool[key] = false
    }
  }  
})

.results { position: relative; }
.test {
  position: absolute;
  top: 0; left: 0;
}

.test.ng-hide-add,
.test.ng-hide-remove {
  transition: 0.5s linear all;
  opacity: 1;
}

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.9/angular.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/angular-animate.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
  <input type="button" value="Show A" ng-click="showBool('a')" />
  <input type="button" value="Show B" ng-click="showBool('b')" />
  <input type="button" value="Show C" ng-click="showBool('c')" />
  <div class="results">
    <div ng-show="bool.a" class="test">
      <h1>Picked A</h1>
    </div>
    <div ng-show="bool.b" class="test">
      <h1>Picked B</h1>
    </div>
    <div ng-show="bool.c" class="test">
      <h1>Picked C</h1>
    </div>
  </div>
</div>