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>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并且将它添加到我们的

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

不像上面的.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 までご連絡ください。

ホットAIツール

ホットツール

ホットトピック

Gmailメールのログイン入り口はどこですか？

7391

Java チュートリアル

1630

CakePHP チュートリアル

1357

Laravel チュートリアル

1268

PHP チュートリアル

1216

Related knowledge

WebSocket と JavaScript を使用してオンライン音声認識システムを実装する方法 Dec 17, 2023 pm 02:54 PM

WebSocket と JavaScript を使用してオンライン音声認識システムを実装する方法はじめに: 技術の継続的な発展により、音声認識技術は人工知能の分野の重要な部分になりました。 WebSocket と JavaScript をベースとしたオンライン音声認識システムは、低遅延、リアルタイム、クロスプラットフォームという特徴があり、広く使用されるソリューションとなっています。この記事では、WebSocket と JavaScript を使用してオンライン音声認識システムを実装する方法を紹介します。

PowerPoint でアニメーションが機能しない [修正] Feb 19, 2024 am 11:12 AM

プレゼンテーションを作成しようとしていますが、アニメーションを追加できませんか? Windows PC 上の PowerPoint でアニメーションが機能しない場合は、この記事が役に立ちます。これは多くの人が不満を抱く一般的な問題です。たとえば、Microsoft Teams でのプレゼンテーション中または画面録画中にアニメーションが停止する場合があります。このガイドでは、Windows 上の PowerPoint で動作しないアニメーションを修正するのに役立つさまざまなトラブルシューティングテクニックを説明します。 PowerPoint アニメーションが機能しないのはなぜですか? Windows 上で PowerPoint のアニメーションが機能しない問題を引き起こす可能性のある考えられる理由として、次のようなことが考えられます。

最初に入力してから終了するように ppt アニメーションを設定する方法 Mar 20, 2024 am 09:30 AM

私たちは日々の仕事で ppt をよく使用しますが、ppt のすべての操作機能に精通していますか?例: ppt でアニメーション効果を設定する方法、切り替え効果を設定する方法、各アニメーションの効果時間はどれくらいですか?各スライドは自動的に再生されますか、ppt アニメーションの開始と終了などはできますか? 今回は、まず ppt アニメーションの開始と終了の具体的な手順を共有します。以下にあります。友達、見に来てください。見て！ 1. まず、コンピューターで ppt を開き、テキストボックスの外側をクリックしてテキストボックスを選択します (下図の赤い丸で示されているように)。 2. 次に、メニューバーの[アニメーション]をクリックし、[消去]効果を選択します(図の赤丸部分)。 3. 次に、[

WebSocket と JavaScript: リアルタイム監視システムを実装するための主要テクノロジー Dec 17, 2023 pm 05:30 PM

WebSocketとJavaScript：リアルタイム監視システムを実現するためのキーテクノロジーはじめに：インターネット技術の急速な発展に伴い、リアルタイム監視システムは様々な分野で広く利用されています。リアルタイム監視を実現するための重要なテクノロジーの 1 つは、WebSocket と JavaScript の組み合わせです。この記事では、リアルタイム監視システムにおける WebSocket と JavaScript のアプリケーションを紹介し、コード例を示し、その実装原理を詳しく説明します。 1.WebSocketテクノロジー

2年の遅れを経て、国産3Dアニメ映画『エル・ランシェン：深海竜』が7月13日に公開予定 Jan 26, 2024 am 09:42 AM

当サイトは1月26日、国産3Dアニメ映画『エル・ランシェン：深海竜』が最新スチールを公開し、7月13日に公開されると正式に発表したと報じた。「Er Lang Shen: The Deep Sea Dragon」は、Mihuxing (Beijing) Movie Co., Ltd.、Horgos Zhonghe Qiancheng Film Co., Ltd.、Zhejiang Hengdian Film Co., Ltd.、Zhejiang Gongying Film によって制作されていることがわかります。 Tianhuo Technology Co., Ltd.とHuawen Image (Beijing) Film Co., Ltd.が制作し、Wang Junが監督したこのアニメーション映画は、当初、2022年7月22日に中国本土で公開される予定でした。。このサイトのあらすじ：授与神の戦いの後、蒋子耶が神々を分割するために「授与神リスト」を持ち出し、授与神リストは天宮によって九州の深海に封印された秘密の領域。実は、授与神リストには神職以外にも強力な悪霊が数多く封印されている。

WebSocketとJavaScriptを使ったオンライン予約システムの実装方法 Dec 17, 2023 am 09:39 AM

WebSocket と JavaScript を使用してオンライン予約システムを実装する方法今日のデジタル時代では、ますます多くの企業やサービスがオンライン予約機能を提供する必要があります。効率的かつリアルタイムのオンライン予約システムを実装することが重要です。この記事では、WebSocket と JavaScript を使用してオンライン予約システムを実装する方法と、具体的なコード例を紹介します。 1. WebSocket とは何ですか? WebSocket は、単一の TCP 接続における全二重方式です。

宮崎駿監督のアニメーション映画『紅の豚』が来年1月16日まで延長され、ドゥバンスコアは8.6となった。 Dec 18, 2023 am 08:07 AM

当サイトのニュースによると、宮崎駿監督のアニメーション映画『紅の豚』が、公開日を2024年1月16日まで延長すると発表した。本サイトは以前、『紅の豚』が全国芸術連盟特別ラインシネマで上映開始されたことを報じた。 11月17日に公開され、累計興行収入は2,000万10,000を超え、Doubanスコアは8.6、4つ星と5つ星のレビューの85.8%を獲得した。『紅の豚』はスタジオジブリ制作、宮崎駿監督、森山守山、加藤登紀子、大塚明夫、岡村明美らが吹き替えに参加し、1992年に日本で公開された。この映画は宮崎駿の漫画『飛行船の時代』を原作とし、魔法で豚に変えられたイタリア空軍のエースパイロット、ポロック・ローゼンの物語を描いている。その後、彼は賞金稼ぎとなり、空中強盗と戦い、周囲の人々を守りました。あらすじ: ローゼンは第一次世界大戦の兵士です

JavaScript と WebSocket を使用してリアルタイムのオンライン注文システムを実装する方法 Dec 17, 2023 pm 12:09 PM

JavaScript と WebSocket を使用してリアルタイムオンライン注文システムを実装する方法の紹介: インターネットの普及とテクノロジーの進歩に伴い、ますます多くのレストランがオンライン注文サービスを提供し始めています。リアルタイムのオンライン注文システムを実装するには、JavaScript と WebSocket テクノロジを使用できます。 WebSocket は、TCP プロトコルをベースとした全二重通信プロトコルで、クライアントとサーバー間のリアルタイム双方向通信を実現します。リアルタイムオンラインオーダーシステムにおいて、ユーザーが料理を選択して注文するとき

See all articles

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

ホットAIツール

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

人気の記事

ホットツール

メモ帳++7.3.1

SublimeText3 中国語版

ゼンドスタジオ 13.0.1

ドリームウィーバー CS6

SublimeText3 Mac版

ホットトピック