Ionic でよく使われるアニメーションのアニメーションと使用状況の分析_html/css

Ionic でよく使われるアニメーションのアニメーションと使用状況の分析_html/css_WEB-ITnose

WBOY

リリース： 2016-06-21 08:59:25

オリジナル

1312 人が閲覧しました

ionic アニメーションの紹介

長い間、ionic を使用して開発したプロジェクトではアニメーションがほとんど使用されず、少し堅い絵になってしまいました。 ionic の新しいバージョンでは、Animate は廃止されました。この CSS ファイルには、CSS3 の @keyframes を使用して記述されていますが、いくつかのテストを行った結果、一部のアニメーションに遅延が発生します。以下は、より一般的に使用されるアニメーションの一部としてまとめられています。

アニメーションスタイル

FadeIn

ionic のタブページから別のビューにジャンプするときにアニメーションがないことがわかります。これは、他のビューが直接表示されることを意味します。トランジションのないインターフェイスはユーザーに良い体験を与えず、画像が硬くなりすぎます。このとき、フェードインを使用してアニメーションをフェードインし、ジャンプ時にジャンプページの読み込みが遅くなるようにすることができます。これははるかにうまく機能します。

メソッド

はモジュールを表示する必要があるクラスに記述されています。ここではページ全体を操作しているため、のクラスに記述されています。ビュー:

CSS コード:

.animated {  -webkit-animation-duration: 1s;  animation-duration: 1s;  -webkit-animation-fill-mode: both;  animation-fill-mode: both;}@-webkit-keyframes fadeIn {  from {    opacity: 0;  }   to {    opacity: 1;  }} @keyframes fadeIn {  from {    opacity: 0;  }   to {    opacity: 1;  }} .fadeIn {  -webkit-animation-name: fadeIn;  animation-name: fadeIn;}

ログイン後にコピー

バウンス

このアニメーションは、bounceInUp (上からポップ)、bounceInDown (下からポップ)、bounceInLeft (

異なる div モジュールに異なるポップアップ効果を設定すると、全方向から囲まれる効果を実現できます。 China Resources Cement のホームページアニメーション

このアニメーションは、Noah Wealth プロジェクトでも使用されています。bounceInUp アニメーションは、ページが読み込まれている限り、モジュール全体の div で使用されます。つまり、このページを見ている限り、キャッシュの有無に関係なくアニメーションが実行されます。

使用方法

使用方法は上記と同じで、両方ともクラスに追加されます

CSS コード (ここには bounceInUp のみが掲載されています。詳細については animate.css を参照してください)

.animated {  -webkit-animation-duration: 1s;  animation-duration: 1s;  -webkit-animation-fill-mode: both;  animation-fill-mode: both;}@-webkit-keyframes bounceInUp {  from, 60%, 75%, 90%, to {    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);  }   from {    opacity: 0;    -webkit-transform: translate3d(0, 3000px, 0);    transform: translate3d(0, 3000px, 0);  }   60% {    opacity: 1;    -webkit-transform: translate3d(0, -20px, 0);    transform: translate3d(0, -20px, 0);  }   75% {    -webkit-transform: translate3d(0, 10px, 0);    transform: translate3d(0, 10px, 0);  }   90% {    -webkit-transform: translate3d(0, -5px, 0);    transform: translate3d(0, -5px, 0);  }   to {    -webkit-transform: translate3d(0, 0, 0);    transform: translate3d(0, 0, 0);  }} @keyframes bounceInUp {  from, 60%, 75%, 90%, to {    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);  }   from {    opacity: 0;    -webkit-transform: translate3d(0, 3000px, 0);    transform: translate3d(0, 3000px, 0);  }   60% {    opacity: 1;    -webkit-transform: translate3d(0, -20px, 0);    transform: translate3d(0, -20px, 0);  }   75% {    -webkit-transform: translate3d(0, 10px, 0);    transform: translate3d(0, 10px, 0);  }   90% {    -webkit-transform: translate3d(0, -5px, 0);    transform: translate3d(0, -5px, 0);  }   to {    -webkit-transform: translate3d(0, 0, 0);    transform: translate3d(0, 0, 0);  }} .bounceInUp {  -webkit-animation-name: bounceInUp;  animation-name: bounceInUp;}

ログイン後にコピー

リスト読み込みフェードインアニメーション

これには、CSS を自分で記述する必要があります。まず効果を見てみましょう。

データの最後の部分がまだロードされていないことがわかります。ここでの効果は、リストデータのロードが開始されると、最初のデータからゆっくりと下に向かってロードされ、アニメーションがフェードインすることです。一つ一つ。

使い方

リストなのでデータの表示にはng-repeatやcollection-repeatを使うのが一般的です次に、own-list-animation などのカスタムクラスを繰り返し div に追加し、このクラスを CSS スタイルでカプセル化します:

.own-list-animation.ng-enter {  -webkit-animation: fadeIn 0.5s;  animation: fadeIn .5s;} .own-list-animation.ng-enter-stagger {  -webkit-animation-delay: 150ms;  animation-delay: 150ms;  /* override to make sure it's not inherited from other styles */  -webkit-animation-duration: 0;  animation-duration: 0;}

ログイン後にコピー

これにより、リストのフェードイン表示効果を実現できます。

これらは、Android マシン上で優れており、途切れることのない最も一般的に使用されるアニメーション効果です。皆様のお役に立てれば幸いです。