ホームページ > 記事 > ウェブフロントエンド > AngularJS アプリケーションで ngView を使用してアニメーション効果を実現する方法_AngularJS
AngularJS アプリケーションで ngView を使用してアニメーション効果を実現する方法_AngularJS
- WBOYオリジナル
- 2016-05-16 15:53:491591ブラウズ
AngularJS は、シングルページ アプリを作成するための優れた方法を提供します。このため、私たちのサイトはネイティブ モバイル アプリケーションのように見えます。ネイティブ プログラムのように見せるために、ngAnimate モジュールを使用してトランジションとアニメーション効果を追加できます。
このモジュールを使用すると、美しいプログラムを作成できます。今日は、ng-view をアニメーション化する方法を見ていきます。
何を作りますか
単一ページのプログラムがあり、このページにアニメーション効果を追加するとします。リンクをクリックすると、1 つの試行がスライドアウトされ、別の試行がスライドインされます。
次を使用します:
- ngRoute を使用してページをルーティングします
- ngAnimate を使用してページのアニメーション効果を作成します
- ページで CSS アニメーションを使用する
- ビューを離れるとき、またはビューに入るとき、各ページには異なるアニメーション効果が適用されます
エクストリーム アニメーション: ここで使用するアニメーション効果は上記のものです。絶妙なアニメーション効果は、あなたのサイトに多くの彩りを加えることができます。デモページだけでも十分です。 *アニメーション効果は、Codrops の ページ遷移のコレクション
から取得されています。どのように機能しますか?
ngAnimate がどのように機能するかを見てみましょう。 ngAnimate は、ビューを開始するか終了するかに応じて、さまざまな Angular ディレクティブに対してさまざまな CSS クラス名を追加および削除します。たとえば、Web サイトをロードすると、ng-view に入力されたものはすべて .ng-enter というクラス名を取得します。
必要なのは、CSS アニメーション効果を .ng-enter クラス名に追加することだけです。アニメーションは、入力時に自動的に有効になります。
ngAnimate は、ngRepeat、ngInclude、ngIf、ngSwitch、ngShow、ngHide、ngView、ngClass に適用できます
ngAnimate の機能の詳細については、ngAnimate ドキュメントを必ずご確認ください。次に、実際の動作を見てみましょう。
プロセスを開始します
次の書類が必要です:
- -index.html
- -style.css
- -app.js
- -page-home.html
- -page-about.html
- -page-contact.html
index.html から始めて、AngularJS、ngRoute 、および ngAnimate をロードします。ちなみに、スタイルを定義するには Bootstrap を使用することを忘れないでください。
<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
<!-- CSS -->
<!-- load bootstrap (bootswatch version) -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootswatch/3.1.1/readable/bootstrap.min.css">
<link rel="stylesheet" href="style.css">
<!-- JS -->
<!-- load angular, ngRoute, ngAnimate -->
<script src="http://code.angularjs.org/1.2.13/angular.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular-route.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular-animate.js"></script>
<script src="app.js"></script>
</head>
<!-- apply our angular app -->
<body ng-app="animateApp">
<!-- inject our views using ng-view -->
<!-- each angular controller applies a different class here -->
<div class="page {{ pageClass }}" ng-view></div>
</body>
</html>
上記は非常に単純な HTML ファイルです。必要なリソースを読み込み、Angular アプリを定義し、挿入するビューの ng-view クラス名を追加します。
必要な他のファイルをいくつか見てみましょう:
- -index.html
- -style.css
- -app.js
- -page-home.html
- -page-about.html
- -page-contact.html
Angular プログラム app.js
ここで、ページを更新せずにページを変更できるように、ルーティングを備えた Angular プログラムを作成する必要があります。
// app.js
// define our application and pull in ngRoute and ngAnimate
var animateApp = angular.module('animateApp', ['ngRoute', 'ngAnimate']);
// ROUTING ===============================================
// set our routing for this application
// each route will pull in a different controller
animateApp.config(function($routeProvider) {
$routeProvider
// home page
.when('/', {
templateUrl: 'page-home.html',
controller: 'mainController'
})
// about page
.when('/about', {
templateUrl: 'page-about.html',
controller: 'aboutController'
})
// contact page
.when('/contact', {
templateUrl: 'page-contact.html',
controller: 'contactController'
});
});
// CONTROLLERS ============================================
// home page controller
animateApp.controller('mainController', function($scope) {
$scope.pageClass = 'page-home';
});
// about page controller
animateApp.controller('aboutController', function($scope) {
$scope.pageClass = 'page-about';
});
// contact page controller
animateApp.controller('contactController', function($scope) {
$scope.pageClass = 'page-contact';
});
次に、アプリケーション、ルート、コントローラーを作成します。
各コントローラーには独自の pageClass 変数があります。変更された値は、index.html ファイルの ng-view に追加されるため、各ページには異なるクラス名が付けられます。これらの異なるクラス名を使用して、異なるページに異なるアニメーション効果を追加できます。
page-home.html、page-about.html、page-contact.html を表示
これらは、できるだけ明確かつ簡単に保つ必要があります。各ページにテキストを用意し、アドレスを他のページにリンクするだけです。
<!-- page-home.html --> <h1>Angular Animations Shenanigans</h1> <h2>Home</h2> <a href="#about" class="btn btn-success btn-lg">About</a> <a href="#contact" class="btn btn-danger btn-lg">Contact</a> <!-- page-about.html --> <h1>Animating Pages Is Fun</h1> <h2>About</h2> <a href="#" class="btn btn-primary btn-lg">Home</a> <a href="#contact" class="btn btn-danger btn-lg">Contact</a> <!-- page-contact.html --> <h1>Tons of Animations</h1> <h2>Contact</h2> <a href="#" class="btn btn-primary btn-lg">Home</a> <a href="#about" class="btn btn-success btn-lg">About</a>
现在，我们拥有了我们的页面，通过使用Angular的路由功能可以将这些页面注入到我们的主index.html文件中。
现在，所有的乏味的工作已经完成。我们的程序应该可以正常工作，并且可以很好的修改页面。接下来，让我们进入下一步，为页面添加动画效果！
为App添加动画效果 style.css
我们将使用CSS来添加所有的动画效果。这种方法很棒，因为我们所要做的事就是添加ngAnimate，并且不用修改我们的代码就可以添加CSS动画效果。
ngAnimate为我们的ng-view添加的两个类分别是.ng-enter和.ng-leave。你可以想象一些他们各自的作用。
基础样式
为了使我们的程序看起来不那么乏味，我们将会添加一些基础的样式。
/* make our pages be full width and full height */
/* positioned absolutely so that the pages can overlap each other as they enter and leave */
.page {
bottom:0;
padding-top:200px;
position:absolute;
text-align:center;
top:0;
width:100%;
}
.page h1 { font-size:60px; }
.page a { margin-top:50px; }
/* PAGES (specific colors for each page)
============================================================================= */
.page-home { background:#00D0BC; color:#00907c; }
.page-about { background:#E59400; color:#a55400; }
.page-contact { background:#ffa6bb; color:#9e0000; }
通过以上的代码，我们为3个页面添加了基础的样式。当我们点击程序的时候，我们可以看到它们应用了不同的颜色和间距。
CSS 动画
让我们定义我们的动画效果，之后我们将会了解一下当页面进入或离开的时候我们怎么才能为不同的页面应用不用的动画效果。
Vendor Prefixes: 我们将会使用默认的CSS属性，不带任何前缀的。完整的代码会包含所有的前缀。
我们定义了6个不同的动画效果。每一个页面都会有他们各自的ng-enter 和 ng-leave 的动画效果。
/* style.css */
...
/* ANIMATIONS
============================================================================= */
/* leaving animations ----------------------------------------- */
/* rotate and fall */
@keyframes rotateFall {
0% { transform: rotateZ(0deg); }
20% { transform: rotateZ(10deg); animation-timing-function: ease-out; }
40% { transform: rotateZ(17deg); }
60% { transform: rotateZ(16deg); }
100% { transform: translateY(100%) rotateZ(17deg); }
}
/* slide in from the bottom */
@keyframes slideOutLeft {
to { transform: translateX(-100%); }
}
/* rotate out newspaper */
@keyframes rotateOutNewspaper {
to { transform: translateZ(-3000px) rotateZ(360deg); opacity: 0; }
}
/* entering animations --------------------------------------- */
/* scale up */
@keyframes scaleUp {
from { opacity: 0.3; -webkit-transform: scale(0.8); }
}
/* slide in from the right */
@keyframes slideInRight {
from { transform:translateX(100%); }
to { transform: translateX(0); }
}
/* slide in from the bottom */
@keyframes slideInUp {
from { transform:translateY(100%); }
to { transform: translateY(0); }
}
结合以上我们所定义的动画效果，我们将会把它们应用到我们的页面上。
进入和离开动画效果
我们只需要将这些动画效果应用给.ng-enter 或 .ng-leave就可以为我们的页面添加不用的动画效果。
/* style.css */
...
.ng-enter { animation: scaleUp 0.5s both ease-in; z-index: 8888; }
.ng-leave { animation: slideOutLeft 0.5s both ease-in; z-index: 9999; }
...
现在，我们的程序就会有像上面那样的动画效果了。当离开的时候，页面会向左滑出，当进入的时候会放大。我们还添加了z-index属性，以便离开的页面会处于进入的页面的上层。
让我们看一下如何为具体的页面创建动画。
具体页面的动画效果
我们为不同的页面创建了各自的Angular 控制器。在这些控制器里面，我们添加了一个pageClass并且将它添加到我们的08c7689d8bf8fe33141f270e3fd6c1d5中。我们将会使用这些类名来引出具体的页面。
不像上面的.ng-enter 和 .ng-leave那样，我们使它们更加具体化。
...
.ng-enter { z-index: 8888; }
.ng-leave { z-index: 9999; }
/* page specific animations ------------------------ */
/* home -------------------------- */
.page-home.ng-enter { animation: scaleUp 0.5s both ease-in; }
.page-home.ng-leave { transform-origin: 0% 0%; animation: rotateFall 1s both ease-in; }
/* about ------------------------ */
.page-about.ng-enter { animation:slideInRight 0.5s both ease-in; }
.page-about.ng-leave { animation:slideOutLeft 0.5s both ease-in; }
/* contact ---------------------- */
.page-contact.ng-leave { transform-origin: 50% 50%; animation: rotateOutNewspaper .5s both ease-in; }
.page-contact.ng-enter { animation:slideInUp 0.5s both ease-in; }
...
现在，每一个页面都有它各自唯一的进入和离开的动画效果。
总结
为我们的Angular程序添加动画效果是相当容易的。你所需要做的就是加载ngAnimate并创建你的CSS动画效果。真诚的希望这篇文章可以帮助你了解一些使用ng-view时的一些比较酷的动画效果。
View Code : http://plnkr.co/edit/uW4v9T?p=info