Angularjs ng-hide 动画不起作用答案

【问题标题】：Angularjs ng-hide animation not workingAngularjs ng-hide 动画不起作用
【发布时间】：2015-05-01 09:47:52
【问题描述】：

我尝试了 this plunker 的 angularjs 动画。但是在我的本地，动画不起作用。正常隐藏/显示工作，但动画不显示。

我的代码如下：

index-show.html

<html>  
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.2/angular.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.2/angular-animate.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
        <script src="./app-show.js"></script>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
        <link rel="stylesheet" type="text/css" href="./app-show.css">
    </head>

    <body ng-app="myApp1">
        <div id='outerdiv' ng-controller="MyCtrl">
            <div ng-click="myValue=true">LEFT</div>
            <div ng-click="myValue=false">RIGHT</div>
            <div id="one" class='animate-hide' ng-hide="myValue">this is just a sample div</div>{{myValue}}</div>
    </body>
</html>

app-show.css

.animate-hide {
    -webkit-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 2s;
    -moz-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 2s;
    -o-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 2s;
    transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 2s;
    line-height:20px;
    opacity:1;
    padding:10px;
    border:1px solid black;
    background:white;
    position: absolute;
    left: 0;
}
.animate-hide.ng-hide {
    left: -100%;
    opacity:0;
    padding:0 10px;
}

app-show.js

var app = angular.module("myApp1", ["ngAnimate"]);
app.controller("MyCtrl", function ($scope) {
    $scope.myValue=false;
});

请让我知道我错过了什么？？

【问题讨论】：

你确定你应该在src 属性中只有一个点吗？（<script src="./app-show.js"></script> 与 <script src="../app-show.js"></script>）
必须是控制台日志中报告的内容。
是的。这三个文件都在同一个文件夹中。
console.log(myValue);查看该值是否确实应该被隐藏
控制台有错误吗？

标签： javascript css angularjs animation

【解决方案1】：

问题是由您使用的 Angular 版本引起的。在您提供的示例中，版本是 angular 1.2.20，而您使用的是 1.2.0-rc.2

升级你的版本，你应该会发现代码有效。

【讨论】：

谢谢@Leo。我认为 ng-how 动画在 1.2.0-rc.2 中不起作用，但 ng-switch 动画有效。