Question

当点击相应的分页按钮时，我正在尝试实现当前可见div的动画效果淡出，另一个div淡出其位置。

我能够达到div正确淡入淡出的程度。

然而，在过渡期间，动画将取代即将淡出的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);

我需要避免div移位。

这可以通过改变css过渡类来实现吗？

Answer 1

你只是通过改变css类来实现它，但你可以用直接的css实现这种效果（称为＆＃34;交叉淡入淡出＆＃34;），以及更多的标记，就像这样：

将容器添加到＆＃34;包含＆＃34;元素，所以我们绝对可以定位它们：

<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应用于需要交叉渐变的div：

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

不使用ngAnimate移动元素的基于类的动画

1 个答案: