javascriptangularjsng-animate

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


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/angular-animate@1.7.8/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!


Solution

  • 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/angular-animate@1.7.8/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>