javascript - 淡出 $scope 内容，然后使用 AngularJS 1.x 替换

Question

这里我有$scope.content一段文字。当用户单击下一个按钮时，我会替换$scope.content文本。

这个文本过渡不是很平滑，所以我想按以下顺序添加一个简单的过渡淡入淡出：

1. 用户单击下一步按钮
2. 当前$scope.contentdiv 将淡出
3. 淡出动画完成后，替换$scope.content
4. 然后立即显示新文本（无动画）

angular
  .module('app', [])
  .controller('Controller', function ($scope) {    
    var data = [
      'Here is slide #1',
      'Another slide, it is #2',
      'Can I get another? Yep! #3',
      'Last but not least, slide #4'
    ];

    $scope.slide = 0;
    $scope.content = data[$scope.slide];
    
    
    $scope.next = function () {
      $scope.slide++;
      $scope.content = data[$scope.slide];
    };
  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="app" ng-controller="Controller">

<div>{{content}}</div>

<button ng-click="next()">Next</button>

</div>

Answer 1

为了达到预期的效果，使用 ngClass 和 $timeout 和 CSS 过渡

1. 为 fadeIn 和 fadeOut 添加 ngClass
2. 在每次单击 next 时，添加 fadeOutclass 并在 2s 超时后添加内容和 fadeIn

angular
  .module('app', [])
  .controller('Controller', function ($scope, $timeout) {    
    var data = [
      'Here is slide #1',
      'Another slide, it is #2',
      'Can I get another? Yep! #3',
      'Last but not least, slide #4'
    ];

    $scope.slide = 0;
    $scope.content = data[$scope.slide]
    
    
    $scope.next = function () {
       $scope.slide++;
       $scope.fadeCheck = true;
       $timeout(function(){
         $scope.content = data[$scope.slide];
         $scope.fadeCheck = false;
       },2000)
    };
  });

.fadeIn {
  visibility: visible;
  opacity: 1;
  transition: opacity 2s linear;
}

.fadeOut{
   visibility: hidden;
  opacity: 0;
  transition: visibility 0s 2s, opacity 2s linear;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="app" ng-controller="Controller">

<div ng-class="{fadeOut:fadeCheck==true,fadeIn:fadeCheck==true}" >{{content}}</div>

<button ng-click="next()">Next</button>

</div>

代码示例 - https://codepen.io/nagasai/pen/aYmvQg