Текст укладывается друг на друга, так как он переставляется для разных значений Angular JS - PullRequest
Новая
       34

Текст укладывается друг на друга, так как он переставляется для разных значений Angular JS

1 голос
/ 13 апреля 2020

Поэтому, когда я нажимаю любую из кнопок, текст должен отображаться в фиксированной позиции. Тем не менее, текст отображается, но требует, чтобы анимация закрытия предыдущего текста заканчивалась до sh, прежде чем он займет фиксированную позицию. Коды указаны ниже:

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 того, что я имею до сих пор: ссылка

Любые советы приветствуются. Спасибо за чтение!

1 Ответ

1 голос
/ 13 апреля 2020

Вам нужно использовать родительский 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>
...