Javascript AngularJS动画未显示_Javascript_Css_Angularjs

Javascript AngularJS动画未显示

javascript css angularjs

Javascript AngularJS动画未显示,javascript,css,angularjs,Javascript,Css,Angularjs,我正在尝试在angularjs应用程序中使用动画。但是我无法让它工作-angular正在工作，但没有显示动画这是一个带有我所有代码的plnkr：如果您希望在stackoverflow上查看我的代码，请参见： index.html： <!doctype html> <html ng-app="app"> <head> <meta charset="utf-8"> <title>Top Animation</titl

我正在尝试在angularjs应用程序中使用动画。但是我无法让它工作-angular正在工作，但没有显示动画

这是一个带有我所有代码的plnkr：

如果您希望在stackoverflow上查看我的代码，请参见：

index.html：

<!doctype html>
<html ng-app="app">

<head>
  <meta charset="utf-8">
  <title>Top Animation</title>
  <script>
    document.write('<base href="' + document.location + '" />');
  </script>
  <link rel="stylesheet" href="style.css">
  <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
  <script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.3/angular.js"></script>
  <script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.3/angular-animate.js"></script>
  <script src="app.js"></script>
</head>

<body>
  <div ng-init="names=['Igor Minar', 'Brad Green', 'Dave Geddes', 'Naomi Black', 'Greg Weber', 'Dean Sofer', 'Wes Alvaro', 'John Scott', 'Daniel Nadasi'];">
    <div class="well" style="margin-top: 30px; width: 200px; overflow: hidden;">
      <form class="form-search">
        <div class="input-append">
          <input type="text" ng-model="search" class="search-query" style="width: 80px">
          <button type="submit" class="btn">Search</button>
        </div>
        <ul class="nav nav-pills nav-stacked">
          <li ng-animate="'animate'" ng-repeat="name in names | filter:search">
            <a href="#"> {{name}} </a>
          </li>
        </ul>
      </form>
    </div>
  </div>
</body>
</html>

style.css：

.animate-enter, 
.animate-leave
{ 
  -webkit-transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
  -moz-transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
  -ms-transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
  -o-transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
  transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
  position: relative;
  display: block;
} 

.animate-enter.animate-enter-active, 
.animate-leave {
  opacity: 1;
  top: 0;
  height: 30px;
}

.animate-leave.animate-leave-active,
.animate-enter {
  opacity: 0;
  top: -50px;
  height: 0px;
}

angular 1.3中的动画已更改。更新后的plunker是否具有动画效果。我从何处复制动画的详细信息：：-）

重复记录

啊，我不知道。谢谢！

.animate-enter, 
.animate-leave
{ 
  -webkit-transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
  -moz-transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
  -ms-transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
  -o-transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
  transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
  position: relative;
  display: block;
} 

.animate-enter.animate-enter-active, 
.animate-leave {
  opacity: 1;
  top: 0;
  height: 30px;
}

.animate-leave.animate-leave-active,
.animate-enter {
  opacity: 0;
  top: -50px;
  height: 0px;
}

<li class="animate-repeat" ng-repeat="name in names | filter:search">
        <a href="#"> {{name}} </a>
      </li>