Can'；t似乎没有为ng show AngularJS制作动画

我正在尝试在满足ng show条件时进行淡入动画。我可以看到ng hide的动画，但看不到ng show的动画

HTML:

JS

---

这里是我的代码的链接。

您可以更新CSS来实现这一点。单击

切换

按钮以查看更好的动画切换效果

var-app=angular.module（'myApp'，['ngAnimate']）；
应用程序控制器（'myCtrl'，函数（$scope）{
$scope.name='Hello World！'；
$scope.bool=false；
$scope.click=function（）{
$scope.bool=true；
};
$scope.reset=函数（）{
$scope.bool=false；
$scope.name=''；
};
});
.test.ng-hide-add，
.test.ng-hide-remove{
过渡：1s线性全部；
不透明度：1；
}
.test.ng-hide{
不透明度：0；
}
.test{margin top:20px；font size:2rem}

{{name}}
您可以更新CSS来实现这一点。单击
切换
按钮以查看更好的动画切换效果


var-app=angular.module（'myApp'，['ngAnimate']）；
应用程序控制器（'myCtrl'，函数（$scope）{
$scope.name='Hello World！'；
$scope.bool=false；
$scope.click=function（）{
$scope.bool=true；
};
$scope.reset=函数（）{
$scope.bool=false；
$scope.name=''；
};
});
.test.ng-hide-add，
.test.ng-hide-remove{
过渡：1s线性全部；
不透明度：1；
}
.test.ng-hide{
不透明度：0；
}
.test{margin top:20px；font size:2rem}

{{name}}
很抱歉，如果问起来似乎很愚蠢，那么ng hide add和ng hide remove是做什么的，@palaѕаа？这只是角度动画内部添加的两个类。addclass是在ngShow表达式的计算结果为非真实值之后，内容设置为hidden之前添加的。在ngShow表达式的计算结果为truthy值之后，在内容设置为visible之前添加remove类。您可以了解更多有关动画中涉及的步骤抱歉，如果问起来似乎很愚蠢，那么ng hide add和ng hide remove是做什么的，@palaѕаа？这些只是角度动画内部添加的两个类。addclass是在ngShow表达式的计算结果为非真实值之后，内容设置为hidden之前添加的。在ngShow表达式的计算结果为truthy值之后，在内容设置为visible之前添加remove类。您可以了解有关动画中涉及的步骤的更多信息
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.9/angular.js"></script>
<script src="https://cdn.jsdelivr.net/npm/angular-animate@1.7.8/angular-animate.js"></script>
<div data-ng-app="myApp" data-ng-controller="myCtrl">
  <input type="text" data-ng-model="name"/>
  <input type="button" data-ng-click="click()" value="Click"/>
  <input type="button" data-ng-click="reset()" value="Reset"/>
  <div data-ng-show="bool" class="test">
     {{name}}
  </div>
</div>

.test.ng-show{
  transition:1s linear all;
  opacity:0;
}
.test.ng-show.ng-show-active{
   opacity:1;
}

var app=angular.module('myApp',['ngAnimate']);

app.controller('myCtrl',function($scope){
    $scope.name='';
  $scope.bool=false;
  $scope.click=function(){
    $scope.bool=true;
  };
  $scope.reset=function(){
    $scope.bool=false;
    $scope.name='';
  };
});