Webアプリケーションのフロントエンドコンポーネントを作成するとき、多くの場合、いわゆるホバー効果の作成に対処する必要があります。 DOMの上にマウスを移動すると、要素がメニュー項目のリンクの色、テキストサイズ、またはアイコンを変更する場合。 CSS3 Transitionなどの技術により、JavaScriptコードを使用せずにアニメーション効果をDOM要素に適用できるようになりました。 私はすぐにこの機会に興味を持ち、スムーズな移行を作成する不必要な努力なしに、それを使い始めました。 例：
- a ：ホバー 、 a {
- 遷移： 色 0.3s線形;
- }
最新バージョンのブラウザのユーザーは、ある色から別の色へのより魅力的な遷移を受け取りましたが、古いブラウザではすべてが同じままで、誰も何も失いませんでした。
画像にCSS3トランジションを使用する機能がないことに非常に失望しました（ background-image ）。 たとえば、メニュー項目にカーソルを合わせるとアイコンが変わり、リンクの色が変わり、アイコンが即座に変わり、リンクの色が滑らかな場合、すべての努力が完全に無効になり、効果がまったくない場合よりもさらに悪く見えます。 アイコンを別の要素に配置するか、疑似要素を作成してcss- opacityプロパティをアニメーション化するために残りました。 しかし、これはレイアウトに対する通常のアプローチを変えました。 私は、htmlマークアップの特別な構造を処理する必要はないが、擬似要素とcssルールの場合には解決策が必要でした。 したがって、「古いレイアウト」（以前は「古い」構造を使用して作成された）のマークアップとルールの変更を避けるために、スムーズなアニメーションを追加することが決定されました。
BackgroundImageTransitionプラグインの設定
ほとんどのプロジェクトではjQueryライブラリを使用しているため、この問題を解決するために、背景画像、つまりbackground-imageのスムーズな変換を実装するjqueryプラグインを作成することにしました。
- $ （ ".selector" ） 。 backgroundImageTransition （ {
- 「移行期間」 ： 500 、
- 「遷移タイミング機能」 ： 「スイング」 、
- 「遷移遅延」 ： 0 、
- 「擬似クラス」 ： 「：ホバー」
- } ） ;
セレクターとして、プラグインには、ある画像から別の画像に背景を変換する機能を追加する必要がある要素または要素のコレクションが与えられます。
プラグインの基本的な変換設定は、 CSS3 Transitionとの類推によって行われます。
| 物件 | デフォルト値 | 可能な値 | 説明 |
|---|---|---|---|
| 移行期間 | 0 | ミリ秒単位の数値（ int ） | アニメーション化された遷移の期間を決定します |
| 遷移タイミング機能 | 振り回す | 中間値を計算する関数の名前（ string ） | 中間値を計算するための関数を定義します |
| 遷移遅延 | 0 | ミリ秒単位の数値（ int ） | アニメーションを開始する前の一時停止を決定します |
適切なjqueryプラグインを追加することにより 、 transition-timing-functionの可能な値を拡張できます。
追加のプラグイン設定：
| 擬似クラス | ：ホバー | ：ホバー、：フォーカス、：アクティブ | プラグインの動作を特定の擬似クラスに関連付けます |
| eventActivate | mouseenter | jqueryイベント（ 文字列 ） | アニメーショントリガーイベント |
| eventDeActivate | ネズミ | jqueryイベント（ 文字列 ） | リバースアニメーショントリガーイベント |
擬似クラスパラメータを使用することをお勧めします。 プラグインの動作を特定の擬似クラスに関連付けます。 動作を拡張する必要がある場合は、 eventActivateプロパティとeventDeActivateプロパティを使用する必要があります;これらのプロパティでは、アニメーションを開始するイベントを渡すことができます。 次に、 疑似クラスオプションを定義する必要はありません。これは優先順位であり、 eventActivate 、 eventDeActivateの設定をオーバーライドします（これらのパラメーターは、それらがどのように機能するかを正確に理解している場合にのみ使用する必要があります）。
仕事の原理。
backgroundImageTransition.jsは、絶対配置で2つのブロックを作成し、セレクターレイヤーの上に配置します。最初のブロックには元の画像が含まれ、2番目のブロックには元の画像が変換されます。 ブロックは、アニメーションの期間中にのみ作成されます。つまり、アニメーションが完了すると削除されます。 ブロック間の変換は、 不透明度の css-propertyを使用して行われます。 次の例を考えてみましょう。
HTMLマークアップメニューがあります。
- < ul id = "メインメニュー" >
- < li class = "css" > <a href = "#">メニュー項目1 < / / a > < / / >
- ...
- < / ul >
およびcssルール：
- ＃main-menu .css {
- background-image ： url （ "img / css.png" ） ;
- }
- ＃main-menu .css ：ホバー {
- background-image ： url （ "img / css_hover.png" ） ;
- }
プラグインをアクティブにします（明確にするために、アニメーションが応答する擬似クラスをプラグインに提供します）。
- $ （ ".css" ） 。 backgroundImageTransition （ {
- 「移行期間」 ： 300 、
- 「擬似クラス」 ： 「：ホバー」
- } ） ;
300msの間、 backgroundImageTransitionは変換（遷移）を視覚化し、アニメーション用に作成されたブロックを削除し、 ＃main-menu .css： hoverから画像を表示します。マウスポインターが要素の外に出ると、逆のアクションが実行されます。 したがって、プラグインから独立しています。 他のコードが同じメニューで機能する場合、高い確率で競合は発生しません。
backgroundImageTransitionは、スプライトの使用をサポートしています。
- ＃main-menu .psd {
- 背景 ： url （ "img / psd.png" ） no-repeat ;
- }
- ＃main-menu .psd ：ホバー {
- background-position ： 0 -172px ;
- }
上記の図によると、画像間もスムーズに移行します。
値：focusが 擬似クラスパラメータとして使用される場合、フォーム（ input 、 textarea、および他のフォーム要素）に対してのみ機能します。
入手先
プラグインの公式ページで backgroundImageTransitionをダウンロードします。 デモを見ることができます。 githubでバグをフォークしたり書いたりできます。