概要

1では、個人プロジェクトにGSAPが適用された管理者ページについて説明します.

Manage Page

1. Manage Page는 Product DB Insert, User Manage(적립금, 쿠폰 부여), ETC 세가지로 구성된다.
2. 각 메뉴는 현재 페이지에서 리로드 없이 렌더링 되어야한다.
3. 메뉴 클릭 -> 각 메뉴 컴포넌트 렌더링 순서가 동기적으로 작용되어야 한다.

第一の構想は以下の通りである.
ハイライトは2番のはずですが、まず構成全体を見てみましょう.

HTML Codes

1. content1 : Product Update Menu
2. content2 : User Management Menu ( 적립금, 쿠폰 등 부여 )
3. content3 : ETC ( 기능은 아직 미정입니다. )
4. adminMenu : 선택된 메뉴에 따라 렌더링될 컴포넌트를 리턴합니다.

各コンテンツdivは、相対位置とinline block displayレベルでリストされます.
display:flexまたはfloat:leftで実装することもできます.
次に、不透明度を既定値の0に設定します.これは、カーソルを上に移動するときにアクティブにする必要があるためです.
ダンプ:0.5 s easeも適用されました.
上のgif画像では、カーソルがメニュータブにあるときにアルファベットが表示されます.
アニメーションを作成するために、spanタグはbutton AreaというIDのdivに囲まれている.
buttonAreaでは、メニュータブごとに位置を調整する必要があります.
複数回のテストを経て、top:40%の位置が適切です.

Functions

カーソルに関する操作はいくつかありますが、試してみる価値はあります.

1. onMouseEnter
2. onMouseOver
3. onMouseOut
4. onMouseLeave

上には4種類あります.
mouseoverとmouseleaveを選択した理由は次のとおりです.

1. onMouseEnter는 마우스가 해당 영역에 들어갔을 때만 효력이 있습니다.
  * 즉, 커서가 올려져있는 동안에 함수가 실행되어야되는 것과 반대됩니다.
2. onMouseOut은 의도된 것처럼 작동했으나, 
   커서가 페이지가 아닌 브라우저의 윗 패널로 이동하는 경우 작동하지 않았습니다.

関数では、activeをクラスに追加できます.

上記のテクニックでは、半透明の黒い背景が表示されます.
何の設備もない場合、背景写真は完全に隠されます.
したがって,content 1,2,3の親contentWrapperに不透明性:0.5を与えた.
したがって、不透明度:1になっても、半透明の効果が見られます.

上の図に示す構造と重なり、z-indexまたは不透明値について説明することができる.


onClickイベントに適用される関数は、同期操作が必要なためasync関数になります.
最初のページにしわができました(?)gsapアニメーション(幅:0%)を適用して、同様の操作を行います.
display:[none](none)を適用して、後でレンダリングする構成部品に干渉しないようにすることもできます.
その後、event.targetのクラス名に基づいてselContent stateを更新します.
これにより、レンダリングするメニュー要素を指定できます.
次に、不透明度:0とdisplay:noneタグを点灯します.
AdminMenuは、構成部品を囲むトップレベルのタグです.
AdminMenuDivは、レンダリングするDbinsertまたはUserManagement構成部品ごとにトップレベルのタグです.
この点はメニューの説明に説明があります.
また、gsapからdisplayをnoneからblockなどに変換する場合はautoAlphaプロパティを使用できます.

autoAlpha:1 이면 opacity를 0에서 1로 올리고 visibillity를 inherit로 부여합니다.
autoAlpha:0 이면 opacity를 1에서 0으로 내리고 visibillity를 hidden으로 부여합니다.

Menu Components

メニューコンポーネントには、DbinsertとUserManagementの2種類があります.
サーバと通信する部分は特にありません.
バックエンド部分をスキップし、アニメーション部分のみをクリーンアップします.

HTML Codes

アニメーションの適用部分を以下に示します.
クリックすると、Manage PageのonClickに戻ります.
カーソルが止まると、onMouseOverにテキストが表示されます.
カーソルが離れるとonMouseLeaveが表示され、テキストが沈みます.

Functions

「Backto Admin menus」と印刷された部分と、管理者メニューページに戻る部分です.
デフォルトでは、テキストはtop:10 pxの位置に隠されています.
カーソルを離すと徐々に透明になり、離れると再び透明になり、元の位置に戻ります.
onClick関数backToAdminは同期処理が必要であるためasync awaitを用いた.
まず、autoAlpha:0でAdminMenuで透明度を0、可視性をhiddenとします.
display:干渉を避ける「none」で再表示されるAdminArea.
AdminAreaのautoAlphaを1にして表示します.
幅:100%を展開します.

참고로 await gsap는 timeline이라는 플러그인을 통해서도 구현할 수 있습니다.
timeline은 여러 gsap.to를 사용자가 지정한 라벨로 묶을 수 있고
예를 들면, 총 5개의 작업이 있을 때 3개의 gsap 애니메이션을 동시에 실행한 뒤 
나머지 2개의 gsap 애니메이션을 순차적으로 진행한다던가 할 수 있습니다.
다만 아직 이해가 부족해 다른 컴포넌트에서 시험삼아 사용 중이며
익숙해지면 정리하려고 합니다.

の最後の部分

ネットショップでしか見たことのないものを自分で作って面白さを増しました!
今日は使えるトリックが2つ見つかりましたが、
すぐに関連する文章を送りたいです.