20

ベース

angular 1.1.5 - http://plnkr.co/edit/eoKt8o4MJw9sWdYdeG3s?p=preview - WORKS

アップされた

angular 1.2.6 - http://plnkr.co/edit/WopgAtFNVm1mKf5Li99h?p=preview - 失敗

私はドキュメントの指示に従ったと思います - http://docs.angularjs.org/api/ngAnimate

• まず、HTML に angular-animate.js を含めます

• 次に、モジュールを依存モジュールとして追加して、アプリケーションにモジュールをロードします。

私のタイムゾーンではかなり遅れており、おそらく明らかな何かを見落としています。私の推測では - 1.1.5 と 1.2.6 の間の CSS ファイルは互換性がありませんか? 本当に言えない...

とにかく、ここにコード形式のプランカーがあります。ドキュメントの指示に従っていることを強調するために、いくつかのコメントを含めました。

<!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://code.angularjs.org/1.2.6/angular.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular-animate.js"></script>
  <!-- ^^^ load animate -->
</head>

<script>
var app = angular.module('app', ['ngAnimate']); // <-- dependent module

app.controller('Ctrl', function($scope) {
  $scope.names = ['Igor Minar', 'Brad Green', 'Dave Geddes', 'Naomi Black', 'Greg Weber', 'Dean Sofer', 'Wes Alvaro', 'John Scott', 'Daniel Nadasi'];
});

</script>

<body ng-controller="Ctrl">
  <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>
</body>
</html>

助けてくれてどうもありがとう！

4

2 に答える 2

36

これがあなたのプランカーの作業バージョンです... http://plnkr.co/edit/05irGvYwD4y9ZRb1ZHSw?p=preview

Angular 1.2+ では、ng-animate ディレクティブを宣言する必要がなくなりました。アニメーションはcssだけで追加できます。あなたの例では、 ng-animate ディレクティブを削除して要素に css クラスを与えることができるので、変更してください...

<li ng-animate="'animate'" ng-repeat="name in names | filter:search">

to...

<li class="animate" ng-repeat="name in names | filter:search">

そして、CSSを...に更新します

.animate.ng-enter, 
.animate.ng-leave
{ 
...

.animate.ng-leave.animate.ng-leave-active,
.animate.ng-enter {
...

.animate.ng-enter.ng-enter-active, 
.animate.ng-leave {
...

Angular は単に要素に ng-enter、ng-hide、ng-leave などのクラスを追加し、アニメーションのライフサイクル中に適切に削除するだけで、css アニメーションがトリガーされます。ドキュメントの「使用方法」の下に、どのディレクティブがどのアニメーション クラスをサポートしているかのリストがあります。この例では、ng-repeat をアニメーション化しているため、適切なタイミングで ng-enter、ng-leave、および ng-move クラスが要素に追加され、css を使用してそれらにアニメーションを追加できます。

于 2014-02-06T04:31:36.120 に答える
2

私は素晴らしい仕事をするこのデモを見つけました: http://jsbin.com/usaruce/3/edit

次の構文を使用します。

.todo-item {
  -webkit-transition: color 0.6s, background-color 0.3s;
  -moz-transition: color 0.6s, background-color 0.3s;
  -ms-transition: color 0.6s, background-color 0.3s;
  transition: color 0.6s, background-color 0.3s;
}
.todo-item.ng-enter {
  -webkit-animation: fadeInLeft 1s;
  -moz-animation: fadeInLeft 1s;
  -ms-animation: fadeInLeft 1s;
  animation: fadeInLeft 1s;
}
.todo-item.ng-leave {
  -webkit-animation: bounceOut 1s;
  -moz-animation: bounceOut 1s;
  -ms-animation: bounceOut 1s;
  animation: bounceOut 1s;
}

また、animate.css (fadeInLeft、bounceOut)も利用します。

于 2014-04-08T17:19:04.513 に答える