首先得明确：ng-if是直接从DOM中添加/移除元素，没法实现平滑的slide动画——元素都被销毁了自然没法做过渡效果。所以我们需要换用保留DOM的方式，结合动画逻辑来实现需求，这里给你两种靠谱的方案：

方案一：用jQuery的slide方法（直观易实现） #

这种方式直接利用jQuery原生的slideUp()和slideDown()，效果和你熟悉的jQuery动画完全一致，步骤如下：

1. 修改HTML：去掉ng-if，我们用slide方法直接控制元素显示隐藏：

<my-section id="player-section"></my-section>

2. 在控制器中监听playerId变化：

angular.module('yourApp').controller('YourController', function($scope) {
  // 监听playerId的变化
  $scope.$watch('$ctrl.playerId', function(newPlayerId) {
    const sectionEl = angular.element(document.getElementById('player-section'));
    
    if (newPlayerId) {
      // playerId存在时，展开元素
      sectionEl.slideDown(300); // 300是动画时长，单位毫秒，可按需调整
    } else {
      // playerId不存在时，收起元素
      sectionEl.slideUp(300);
    }
  });
});

3. 优化：封装成自定义指令（复用性更强）
   如果这个动画逻辑需要在多个地方使用，可以封装成指令：

angular.module('yourApp').directive('slideToggle', function() {
  return {
    scope: {
      slideToggle: '=' // 绑定外部的playerId变量
    },
    link: function(scope, element) {
      // 监听绑定值的变化
      scope.$watch('slideToggle', function(isVisible) {
        if (isVisible) {
          element.slideDown(300);
        } else {
          element.slideUp(300);
        }
      });
    }
  };
});

使用时直接绑定playerId即可，非常简洁：

<my-section slide-toggle="$ctrl.playerId"></my-section>

方案二：用Angular的ngAnimate模块（纯CSS动画，无需jQuery） #

如果你的项目不想依赖jQuery，可以用Angular自带的ngAnimate模块，通过CSS过渡实现slide效果：

1. 引入ngAnimate模块：

angular.module('yourApp', ['ngAnimate']); // 注入ngAnimate依赖

2. 修改HTML：把ng-if换成ng-show（因为ng-show只是控制display属性，DOM会保留），并添加动画类：

<my-section ng-show="$ctrl.playerId" class="slide-animation"></my-section>

3. 编写CSS动画规则：

/* 基础样式：确保动画过程中元素不会溢出 */
.slide-animation {
  overflow: hidden;
}

/* 元素隐藏时的动画（模拟slideUp） */
.slide-animation.ng-hide-add {
  max-height: 1000px; /* 设置一个足够大的值，覆盖元素可能的最大高度 */
  transition: max-height 0.3s ease-out;
}

.slide-animation.ng-hide-add.ng-hide-add-active {
  max-height: 0;
}

/* 元素显示时的动画（模拟slideDown） */
.slide-animation.ng-hide-remove {
  max-height: 0;
  transition: max-height 0.3s ease-in;
}

.slide-animation.ng-hide-remove.ng-hide-remove-active {
  max-height: 1000px;
}

这里用max-height代替height是因为元素高度可能是动态的，浏览器无法直接过渡height: auto，用足够大的max-height可以模拟自然的slide效果。

额外说明：如果一定要用ng-if？ #

如果业务场景必须保留ng-if（比如元素销毁后需要重置内部状态），可以用ngAnimate的enter/leave动画：

.my-section {
  overflow: hidden;
}

/* 元素进入DOM时的slideDown */
.my-section.ng-enter {
  max-height: 0;
  transition: max-height 0.3s ease-in;
}

.my-section.ng-enter-active {
  max-height: 1000px;
}

/* 元素离开DOM时的slideUp */
.my-section.ng-leave {
  max-height: 1000px;
  transition: max-height 0.3s ease-out;
}

.my-section.ng-leave-active {
  max-height: 0;
}

HTML保持ng-if：

<my-section ng-if="$ctrl.playerId" class="my-section"></my-section>

这种方式的缺点是元素销毁后要等动画结束才会被移除DOM，且如果元素高度超过设置的max-height，动画会不自然，所以更推荐前两种方案。

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