AngularJS アプリケーションで ngView を使用してアニメーション効果を実現する方法

ホームページ

ウェブフロントエンド

jsチュートリアル

AngularJS アプリケーションで ngView を使用してアニメーション効果を実現する方法_AngularJS

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:53 PM

javascriptアニメーション

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 id="Angular-Animations-Shenanigans">Angular Animations Shenanigans</h1>
<h2 id="Home">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 id="Animating-Pages-Is-Fun">Animating Pages Is Fun</h1>
<h2 id="About">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 id="Tons-of-Animations">Tons of Animations</h1> 
<h2 id="Contact">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并且将它添加到我们的

中。我们将会使用这些类名来引出具体的页面。

不像上面的.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

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ブラウザを超えて：現実世界のJavaScriptApr 12, 2025 am 12:06 AM

現実世界におけるJavaScriptのアプリケーションには、サーバー側のプログラミング、モバイルアプリケーション開発、モノのインターネット制御が含まれます。 2。モバイルアプリケーションの開発は、ReactNativeを通じて実行され、クロスプラットフォームの展開をサポートします。 3.ハードウェアの相互作用に適したJohnny-Fiveライブラリを介したIoTデバイス制御に使用されます。

next.jsを使用してマルチテナントSaaSアプリケーションを構築する（バックエンド統合）Apr 11, 2025 am 08:23 AM

私はあなたの日常的な技術ツールを使用して機能的なマルチテナントSaaSアプリケーション（EDTECHアプリ）を作成しましたが、あなたは同じことをすることができます。まず、マルチテナントSaaSアプリケーションとは何ですか？マルチテナントSaaSアプリケーションを使用すると、Singの複数の顧客にサービスを提供できます

next.jsを使用してマルチテナントSaaSアプリケーションを構築する方法（フロントエンド統合）Apr 11, 2025 am 08:22 AM

この記事では、許可によって保護されたバックエンドとのフロントエンド統合を示し、next.jsを使用して機能的なedtech SaaSアプリケーションを構築します。 FrontEndはユーザーのアクセス許可を取得してUIの可視性を制御し、APIリクエストがロールベースに付着することを保証します

JavaScript：Web言語の汎用性の調査Apr 11, 2025 am 12:01 AM

JavaScriptは、現代のWeb開発のコア言語であり、その多様性と柔軟性に広く使用されています。 1）フロントエンド開発：DOM操作と最新のフレームワーク（React、Vue.JS、Angularなど）を通じて、動的なWebページとシングルページアプリケーションを構築します。 2）サーバー側の開発：node.jsは、非ブロッキングI/Oモデルを使用して、高い並行性とリアルタイムアプリケーションを処理します。 3）モバイルおよびデスクトップアプリケーション開発：クロスプラットフォーム開発は、反応および電子を通じて実現され、開発効率を向上させます。

JavaScriptの進化：現在の傾向と将来の見通しApr 10, 2025 am 09:33 AM

JavaScriptの最新トレンドには、TypeScriptの台頭、最新のフレームワークとライブラリの人気、WebAssemblyの適用が含まれます。将来の見通しは、より強力なタイプシステム、サーバー側のJavaScriptの開発、人工知能と機械学習の拡大、およびIoTおよびEDGEコンピューティングの可能性をカバーしています。

javascriptの分解：それが何をするのか、なぜそれが重要なのかApr 09, 2025 am 12:07 AM

JavaScriptは現代のWeb開発の基礎であり、その主な機能には、イベント駆動型のプログラミング、動的コンテンツ生成、非同期プログラミングが含まれます。 1）イベント駆動型プログラミングにより、Webページはユーザー操作に応じて動的に変更できます。 2）動的コンテンツ生成により、条件に応じてページコンテンツを調整できます。 3）非同期プログラミングにより、ユーザーインターフェイスがブロックされないようにします。 JavaScriptは、Webインタラクション、シングルページアプリケーション、サーバー側の開発で広く使用されており、ユーザーエクスペリエンスとクロスプラットフォーム開発の柔軟性を大幅に改善しています。

pythonまたはjavascriptの方がいいですか？Apr 06, 2025 am 12:14 AM

Pythonはデータサイエンスや機械学習により適していますが、JavaScriptはフロントエンドとフルスタックの開発により適しています。 1. Pythonは、簡潔な構文とリッチライブラリエコシステムで知られており、データ分析とWeb開発に適しています。 2。JavaScriptは、フロントエンド開発の中核です。 node.jsはサーバー側のプログラミングをサポートしており、フルスタック開発に適しています。

JavaScriptをインストールするにはどうすればよいですか？Apr 05, 2025 am 12:16 AM

JavaScriptは、最新のブラウザにすでに組み込まれているため、インストールを必要としません。開始するには、テキストエディターとブラウザのみが必要です。 1）ブラウザ環境では、タグを介してHTMLファイルを埋め込んで実行します。 2）node.js環境では、node.jsをダウンロードしてインストールした後、コマンドラインを介してJavaScriptファイルを実行します。

See all articles

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

VSCode Windows 64 ビットのダウンロード

Microsoft によって発売された無料で強力な IDE エディター

mPDF

mPDF は、UTF-8 でエンコードされた HTML から PDF ファイルを生成できる PHP ライブラリです。オリジナルの作者である Ian Back は、Web サイトから「オンザフライ」で PDF ファイルを出力し、さまざまな言語を処理するために mPDF を作成しました。 HTML2FPDF などのオリジナルのスクリプトよりも遅く、Unicode フォントを使用すると生成されるファイルが大きくなりますが、CSS スタイルなどをサポートし、多くの機能強化が施されています。 RTL (アラビア語とヘブライ語) や CJK (中国語、日本語、韓国語) を含むほぼすべての言語をサポートします。ネストされたブロックレベル要素 (P、DIV など) をサポートします。