Angular中判断折叠区域状态及解决按钮文本切换异常问题

我完全懂你的困扰——动画还在执行的时候双击按钮，toggle变量会快速来回翻转，导致按钮文本和div的实际展开/折叠状态脱节，对吧？这是因为你用$watch监听的是变量的即时变化，而不是DOM动画完成后的真实状态，所以很容易出现不同步的问题。

下面给你两个靠谱的解决思路：

方法1：动画期间锁定按钮，防止重复触发 #

最简单的方案就是在动画执行时禁用按钮，直到动画完全结束，从根源上避免双击的问题。

首先在控制器里新增一个状态变量，用来标记是否正在执行动画：

$scope.toggle = true;
$scope.isAnimating = false;
// 注意：如果toggle=true对应div展开，按钮初始文本应该是Hide，别搞反了
$scope.toggleText = $scope.toggle ? 'Hide' : 'Show';

$scope.toggleDiv = function() {
  // 动画正在执行时，直接忽略点击
  if ($scope.isAnimating) return;
  
  $scope.isAnimating = true;
  $scope.toggle = !$scope.toggle;
  $scope.toggleText = $scope.toggle ? 'Hide' : 'Show';
};

然后结合Angular的动画事件，在动画开始和结束时更新isAnimating状态：

// 监听动画开始事件
$scope.$on('$animate:start', function(event, element) {
  // 替换成你要折叠的div的类名/选择器
  if (element.is('.collapse-target')) {
    $scope.isAnimating = true;
  }
});

// 监听动画结束事件
$scope.$on('$animate:complete', function(event, element) {
  if (element.is('.collapse-target')) {
    $scope.isAnimating = false;
  }
});

最后在按钮上加上禁用指令：

<button ng-click="toggleDiv()" ng-disabled="isAnimating">{{toggleText}}</button>
<div ng-show="toggle" class="collapse-target">你的折叠内容</div>

方法2：绑定动画结束事件，同步更新文本 #

如果想更精准地和DOM状态同步，可以放弃依赖toggle变量的即时变化，而是等动画完全结束后再更新按钮文本，确保100%匹配实际状态。

比如结合CSS过渡动画的结束事件：

$scope.toggle = true;
$scope.toggleText = 'Hide';
$scope.isAnimating = false;

$scope.toggleDiv = function() {
  if ($scope.isAnimating) return;
  
  $scope.isAnimating = true;
  const targetDiv = angular.element(document.querySelector('.collapse-target'));

  if ($scope.toggle) {
    // 执行折叠动画
    targetDiv.addClass('collapsing');
    // 监听动画结束事件
    targetDiv.one('transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd', function() {
      $scope.$apply(() => {
        $scope.toggle = false;
        $scope.toggleText = 'Show';
        $scope.isAnimating = false;
      });
    });
  } else {
    // 先展开div，再执行展开动画
    $scope.toggle = true;
    $scope.$apply(() => {
      targetDiv.addClass('expanding');
    });
    targetDiv.one('transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd', function() {
      $scope.$apply(() => {
        $scope.toggleText = 'Hide';
        $scope.isAnimating = false;
      });
    });
  }
};

这种方式完全跟着DOM的动画状态走，不管怎么点击，文本只会在动画完成后更新，绝对不会出现脱节的情况。

小提醒：检查初始化的文本对应关系 #

你原来的代码里，toggle=true时文本设为Show，这大概率是搞反了——如果toggle=true对应div展开，按钮应该显示Hide才对，初始化的时候要注意这个对应关系哦。

内容的提问来源于stack exchange，提问作者Vereonix