为什么文字没有淡出？答案

【问题标题】：Why does the text not fade out?为什么文字没有淡出？
【发布时间】：2020-06-16 11:42:47
【问题描述】：

我开始学习 AngularJS 并遵循教科书中的编码示例。根据本书的说法，示例代码应该具有使文本淡出的动画效果，但事实并非如此。有谁知道我应该添加什么或我错过了什么？谢谢。

<!DOCTYPE html>
    <html ng-app="myApp">
    <head>
       <title>AngularJS animation installation</title>
    </head>
    <body>
    <style type="text/css">
        .firstSampleAnimation.ng-hide-add,
        .firstSampleAnimation.ng-hide-remove {
            -webkit-transition: 1s ease-in-out opacity;
            transition: 1s ease-in-out opacity;
            opacity: 1;
        }
        .firstSampleAnimation.ng-hide {
            opacity: 0;
        }
    </style>
    <div>
        <div ng-controller="animationsCtrl">
            <h1>ngShow animation</h1>
            <button ng-click="fadeAnimation = !fadeAnimation">Toggle fade</button>
            fadeAnimation value: {{fadeAnimation}}
            <div class="firstSampleAnimation" ngshow="fadeAnimation">
                This element appears when the fadeAnimation model is true
            </div>
        </div>
    </div>
    <script type="text/javascript" src="./angular-1.7.9/angular.min.js"></script>
    <script type="text/javascript" src="./angular-1.7.9/angular-animate.min.js"></script>
    <script>
        var app = angular.module('myApp', ['ngAnimate']);
        app.controller('animationsCtrl', function ($scope) {
        $scope.fadeAnimation = false;
        });
    </script>
    </body>
</html>

【问题讨论】：

请使用嵌入式代码 sn-p 工具，帮助解释这段代码做了什么，还没有做什么。以及你想要它做什么。
请使用code sn-p工具，并附上和angular js一样的js文件

标签： html css angularjs

【解决方案1】：

ngshow 应该是 ng-show

 <div class="firstSampleAnimation" ng-show="fadeAnimation">
            This element appears when the fadeAnimation model is true
        </div>

【讨论】：