Question

我试图淡出一个div，然后显示一个新div，但我的代码被破坏了。我该怎么办？淡出动画有效，但showManagement div不会出现。

HTML

<div ng-hide="hidden" ng-class="{fade: startFade}">
    <p>this is start content that should be faded</p>
</div>
<div class="showManagement" ng-show="showManagement">
    <p>this is the new content to be displayed once the fade is complete.</p>
</div>

JS

$scope.getManagement = function () {

    $scope.startFade = true;

    $timeout(function(){
        $scope.hidden = true;
    }, 2000);

    // this is the part that doesn't display
    $scope.showManagement = true;
 };

CSS

.fade{
    transition: opacity 3s;
    opacity: 0;
}

Answer 1

由于你没有提供你的控制器并且没有显示你调用函数getManagement()的位置，我假设你想要在角度加载后的2秒内显示所有淡出淡入事件

这是example on CodePen，了解如何通过您的方法实现目标。

这是代码：

HTML

<body ng-app="myApp">
  <div class="wrapper" ng-controller="MainCtrl">
    <div ng-class="{fade: startFade}">
        <p>this is start content that should be faded</p>
    </div>
    <div ng-class="{hideManagement: hideManagement, showManagement: showManagement}">
        <p>this is the new content to be displayed once the fade is complete.</p>
    </div>
  </div>
</body>

CSS

.fade{
    transition: opacity 3s;
    opacity: 0;
}

.hideManagement {
  opacity: 0;
}

.showManagement {
    transition: opacity 3s 3s;
    opacity: 1;
}

JS

angular
  .module('myApp', [])
  .controller('MainCtrl', ['$scope', '$timeout', function($scope, $timeout) {
    $scope.startFade = false;
    $scope.showManagement = false;
    $scope.hideManagement = true;

    $timeout(function(){
      $scope.startFade = true;
      $scope.showManagement = true;
      $scope.hideManagement = false;
    }, 2000);
  }]);

你必须记住一些事情：

您无法使用CSS3过渡为display: none;和display: block;设置动画。这就是ng-hide .showManagement未显示过渡效果的原因。您应该继续使用opacity来实现此目标，就像您在ng-class="{fade: startFade}"
在Angular控制器的开头初始化您的状态。在您提供的示例中，您设置$scope.showManagement，$scope.hidden和$scope.startFade的方式有点令人困惑。一旦你像我提供的例子那样设置你的初始状态，你会更清楚你应该在函数中改变什么样的状态，无论是在$timeout回调中还是在其他事件触发的其他函数中
要在第一个.showManagement完成淡出效果后立即进行<div>淡入，您可以设置css过渡的延迟。

如果您正在制作更复杂的动画，则应尝试利用ngAnimate服务。使用ngAnimate，您可以在此示例中删除ng-class，并简单地将动画规则与.ng-enter，.ng-enter-active，.ng-hide，.ng-hide-active绑定在一起由Angular自动绑定到您的元素。这是ngAnimate的{{3}}。

角度显示/隐藏动画

1 个答案:

HTML

CSS

JS