文本相互堆叠，因为它被交换为不同的值Angular JS

Question

因此，当我按下任一按钮时，文本应呈现在固定位置。但是，该文本可以渲染，但需要前一个文本的结束动画才能完成固定位置。代码如下：

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;
    }
});

这里是到目前为止的JSFiddle实现：link

任何提示都值得赞赏。感谢您的阅读！

Answer 1

您需要使用父div并将position: absolute设置为.test div，我也将代码缩短了一点：

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>