👨🏾 🍰 👈🏼 アニメーションメニューの作成例 🕔 😍 🌵

私の仕事では、しばしば同じタスクに遭遇します。 1つの場所に停滞しないように、開発者として開発し、同じ仕事に飽きないように、プロジェクトで小さなチップを思いつきます。
そのため、クライアントのいずれかの管理パネルを作成するときに、Mootoolsフレームワークを使用してアニメーションメニューを作成することにしました。この記事では、メニューの作成方法を説明し、この点で私を助けたフレームワークの機能とメソッドを少し説明します。この記事は、mootoolsを習い始めたばかりの人と、このフレームワークの勉強を始めたいが、どこから始めればいいのか分からない人向けに書かれています。

このフレームワークの利点とその欠点については、この記事の範囲外であることに注意してください。

したがって、まず最初に、静的メニューを作成する必要があります。コードのバージョンは次のとおりです。

 html

 <div class = "bord"> </ div>
 <div class = "head">
     <a class="headParagraph">設定</a>
     <a class="headParagraph">セクション</a>
     <a class="headParagraph">記事</a>
     <a class="headParagraph">ギャラリー</a>
     <a class="headParagraph">言語</a>
     <a class="headParagraphExit" href="#">ログアウト</a>
 </ div>

 CSS

 .head {
	マージン：0自動;
	パディング：15px 20px 3px 20px;
	幅：90％;
	高さ：17px;
 }

 .bord {
	ボーダートップ：2pxソリッド＃000;
	上：35px;
	左：3％;
	幅：94％;
	位置：絶対;
 }

 .headParagraph {
	 float：左;
	マージン右：40px;
	カーソル：ポインター。
	フォントサイズ：16px;
	色：＃444;
	マージントップ：0;
 }

 .headParagraphExit {
	 float：右;
	カーソル：ポインター。
	テキスト装飾：なし;
	色：＃000;
	 font-sizq：20px;
 }

「落下」リンクの効果を作成するには、Fx.Morphクラスを使用します。これにより、CSS内の要素のプロパティを変更できます。

クラスは次のように宣言されます。

var myEffect = new Fx.Morph('myElement', {duration: 'long', transition: Fx.Transitions.Sine.easeOut});

durationプロパティは、長い値または短い値を取ることができます-これは、エフェクトの速度（要素のプロパティのある値から別の値への遷移）に影響します。トランジションはエフェクトアニメーションのタイプを決定します;詳細については、このプロパティの許容値のリストについては公式ドキュメントを参照してください。

エフェクトをトリガーするには、オブジェクトのプロパティと変更方法を宣言する必要があります。これにはstartメソッドがあり、エフェクトを起動します：

  myEffect.start（{
	 '高さ'：[10、100]、
	 「幅」：[900、300]
 }）;

この例では、要素は幅と高さの値を変更します-高さが10pxから100pxに増加し、幅がそれぞれ900pxから300pxに減少します。
この方法の他のいくつかのバリエーションも可能です、例えば：

  myEffect.start（{
	 「高さ」：100、
	 「幅」：300
 }）;

または

myEffect.start('.myClassName');

最初の例では、要素はプロパティを現在の値からメソッドで指定したものに変更し、2番目の例では、現在関連するプロパティはmyClassNameクラスで説明されているものに変更します。

したがって、リンクを「フォール」して元の位置に戻すには、リンクのマージン上部と色のプロパティを変更するクラスを作成し、選択されたものと呼びます。

 .selected {
	マージン上部：25px;
	色：＃000;
 }

ここで、「fall」へのリンクを作成するには、選択したクラスをそれに適用し、元の位置であるheadParagraphクラスに戻す必要があります。

メニュー項目にアクセスするには、mootoolsで提供される2つのメソッドのいずれかを使用できます-要素のidで呼び出すか、要素が属するクラスの名前、または同じタイプの要素のグループを参照するタグの名前で要素の配列にアクセスします。
最初の場合、要素の呼び出しは$（ 'id_element'）のようになります。 2番目の場合、$$（ '＃tag_name.class'）、$$（ '＃tag_name'）、$$（ '。Class'）は、条件の1つに対応する要素の配列を返します。

この場合、要素の配列を取得するために、2番目の処理オプションを使用します。

  $$（ '。headParagraph'）。each（関数（要素、インデックス）{
	 element.addEvent（ 'click'、function（）{
		 var myEffect = new Fx.Morph（element、{
                期間： 'short'、 
                トランジション：Fx.Transitions.Elastic.easeInOut
                 }）;
		 myEffect.start（ '。selected'）;
		 $$（ '。headParagraph'）。each（関数（otherElement、otherIndex）{
			 if（element！= otherElement）{
				 var myOtherEffect = new Fx.Morph（otherElement、{
                                期間： 'short'、 
                                トランジション：Fx.Transitions.Back.easeOut
                                 }）;
				 myOtherEffect.start（ '。headParagraph'）;
			 }
		 }）;
	 }）;
 }）;

構文$$（ '。HeadParagraph'）。Each（関数（要素、インデックス）{...}）; $$配列（ '。headParagraph'）のすべての要素を順番に繰り返し、配列の現在の要素の値を変数要素に割り当て、この要素のキーを変数インデックスに割り当てます。
上記で引用したコードをもう少し詳しく調べてみましょう。ループ内の各要素に、onClickイベントにアニメーションを添付します。

  element.addEvent（ 'click'、function（）{
     var myEffect = new Fx.Morph（element、{
        期間： 'short'、 
        トランジション：Fx.Transitions.Elastic.easeInOut
     }）;
     myEffect.start（ '。selected'）;
     ...
 }）;

デザイン

  $$（ '。headParagraph'）。each（関数（otherElement、otherIndex）{
     if（element！= otherElement）{
         var myOtherEffect = new Fx.Morph（otherElement、{
            期間： 'short'、 
            トランジション：Fx.Transitions.Back.easeOut
         }）;
         myOtherEffect.start（ '。headParagraph'）;
     }
 }）;

メニューのセクションの1つをクリックすると、現在アクティブなセクションが元の位置に戻るようにします。

このリンクで最終結果を見ることができます。

ご不明な点がございましたら、コメントまたは郵送でお答えいたします。まあ、読者がこのトピックに興味を持っているなら、継続は間もなく来るでしょう。

アニメーションメニューの作成例

More articles: