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

ionic アニメーションの紹介

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

アニメーション スタイル

FadeIn

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

メソッド

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

50e6281fcfa1b0ad38b088bf0487d4e1

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 で使用されます。つまり、このページを見ている限り、キャッシュの有無に関係なくアニメーションが実行されます。

使用方法

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

eda59d2cfd39234dbcf49a164dc0e070

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 マシン上で優れており、途切れることのない最も一般的に使用されるアニメーション効果です。皆様のお役に立てれば幸いです。