文本堆叠在彼此之上，因为它为不同的值互换 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/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;
    }
});

这是我目前拥有的 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/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>

文本堆叠在彼此之上，因为它为不同的值互换 Angular JS

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

javascript

angularjs

ng-animate