2

私はAngularが初めてで、必要なこのフェードインアニメーションについてjQueryに依存しないようにしています。

ng-animate と .fade-enter + .fade-enter.fade-enter-active を試しましたが、どこにも行きません。

私のフッターCSSは次のようになります：

footer {
  opacity: 0.3;
  text-align: center;
}

そして、不透明度が2秒で1になるようにアニメーション化しようとしています。

これは私が実行しているAngularのバージョンです:

<script data-require="angular.js@1.1.5" data-semver="1.1.5" src="http://code.angularjs.org/1.1.5/angular.min.js"></script>

Angular と CSS を使用し、jQuery を使用せずにこのアニメーションを行うにはどうすればよいですか?

4

2 に答える 2

3

Angular 1.1.5 でフェード イン/アウト アニメーションを実行する方法の例を次に示します。

HTML

<body ng-init="visible = true">
  <button ng-click="visible = !visible">Show/Hide</button>
  <p ng-show="visible" ng-animate="'fade'">Hello {{name}}!</p>
</body>

CSS

.fade-hide, .fade-show {
  -webkit-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
  -moz-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
  -o-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
  transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
}

.fade-hide {
  opacity:1;
}

.fade-hide.fade-hide-active {
  opacity:0;
}

.fade-show {
  opacity:0;
}

.fade-show.fade-show-active {
  opacity:1;
}

ここでプランカー。

このブログ投稿には、Angular 1.1.5 のアニメーションに関する優れた情報があります。そして、Angular 1.2 RC1 でリリースされた新しいアニメーション システムを見てみることをお勧めします。

于 2013-08-24T20:32:57.877 に答える
0

アニメーションについて必要なことはすべて、ドキュメントで見つけることができます

HTML

<div ng-init="checked=true">
  <label>
    <input type="checkbox" ng-model="checked" style="float:left; margin-right:10px;"> Is Visible...
  </label>
  <div class="check-element sample-show-hide" ng-show="checked" style="clear:both;">Visible...</div>
</div>

CSS

.sample-show-hide {
  padding:10px;
  border:1px solid black;
  background:white;
}

.sample-show-hide {
  -webkit-transition:all linear 0.5s;
  transition:all linear 0.5s;
 }

.sample-show-hide.ng-hide {
   opacity:0;
}

ソース: https://docs.angularjs.org/guide/animations

于 2015-01-14T17:48:11.690 に答える