Анимация на основе классов без перемещаемого элемента с ngAnimate

Question

Я пытаюсь добиться эффекта анимации текущего видимого div, чтобы исчезнуть, а другой div исчезнет на своем месте, когда нажата соответствующая кнопка разбиения на страницы.

Я смог дойти до того места, где divs будут правильно исчезать и исчезать.

Однако анимация вытеснит div, чтобы исчезнуть, ниже div, чтобы исчезнуть, на время перехода.

До сих пор это то, что у меня есть:

// html 
<div ng-show="isGroupActive(1)" class="group"></div> 
<div ng-show="isGroupActive(2)" class="group"></div> 
<div ng-show="isGroupActive(3)" class="group"></div> 

<button ng-click="activateGroup(1)">1</button> 
<button ng-click="activateGroup(2)">2</button> 
<button ng-click="activateGroup(3)">3</button> 

---

// css 
.group.ng-hide-add-active { 
    display: block!important; 
    -webkit-transition: 0.5s linear all; 
    transition: 0.5s linear all; 
} 
.group.ng-hide-remove-active { 
    display: block!important; 
    -webkit-transition: 0.5s linear all; 
    transition: 0.5s linear all; 
    -webkit-transition-delay: 0.5s; 
    transition-delay: 0.5s; 
} 
.group.ng-hide { 
    opacity: 0; 
} 

.group.ng-show-add-active { 
    display: block!important; 
    -webkit-transition: 0.5s linear all; 
    transition: 0.5s linear all; 
} 

.group.ng-show-remove-active { 
    display: block!important; 
    -webkit-transition: 0.5s linear all; 
    transition: 0.5s linear all; 
    -webkit-transition-delay: 0.5s; 
    transition-delay: 0.5s; 
} 
.group.ng-show { 
    opacity: 1; 
} 

---

// js 

function MainController($scope) { 

    var groupActive = 1; 

    $scope.isGroupActive = function(page) { 
     return page === groupActive; 
    }; 

    $scope.activateGroup = function(page) { 
     groupActive = page; 
    } 

} 

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

app.controller('MainController', MainController); 

мне нужно, чтобы избежать смещения отд.

Возможно ли это, просто изменив классы перехода css?

Answer 1

Вы не можете достичь этого только путем изменения классов CSS, но вы можете добиться этого эффекта (известный как «затенения») с прямой CSS, и немного больше разметки, например, так:

Добавить контейнер для "содержать" элементы, так что мы можем абсолютно позиционировать их:

<div id="container"> 
    <div ng-show="isGroupActive(1)" class="group"></div> 
    <div ng-show="isGroupActive(2)" class="group"></div> 
    <div ng-show="isGroupActive(3)" class="group"></div> 
</div> 

применить position: relative к контейнеру:

#container { 
    position: relative; 
} 

Затем нанесите position: absolute к divs, которые необходимо перекрестно-увядать:

#container > div { 
    position: absolute; 
    top: 0; // adjust as needed 
    left: 0; // adjust as needed 
}