GSAPと反応アプリで読む多かれ少なかれ機能を実装する.

私はいくつかの時間のためにその多くの用途を学んでいる間、GSAP(Greensock Platform Platform)で遊んでいました、そして、私はそれを最近達成したものを共有することに興奮しています.あなたが疑問に思っているならば、GSAPはあなたにコントロールと柔軟性の前例のないレベルを与えている間、ウェブ上でアニメーションを構築するためのJavaScriptツールのセットです.
あなたはどのようにあなたの反応のアプリで多かれ少なかれ機能を読むについて行くだろうか、それはあなたが色のテキストやボタンをクリックしてテキストの残りの部分をレンダリングしようとするとスムーズにアニメーション化したことがありますか?では、始めましょう.
まず第一に、あなたはちょうどあなたの反応の旅を始めている場合は、これはちょうど運動です、反応チームはあなたのためにこのtutorialを準備しています.同様に、GSAPで始まるGSAPチームは、このdetailed guideでカバーしました.
プロジェクトが設定されたら、npx create-react-app read-more-or-lessを実行すると、あなたのCLIでcd read-more-or-lessとnpm i gsapを実行することによって、Create Reaction Appを使用してプロジェクトを起動します.この演習では、再利用可能なコンポーネント、showcontentを作成します.JSは、'子'、' Vars '(あなたがGSAPタイムラインに通過するプロパティのオブジェクト)、および'表示'プロップオブジェクトから表示するテキストを表示します.
USEState、UseayouYouTffect(UseEffectに似たフックですが、すべてのDOM突然変異の後に同期して火災を起こします.詳細については、React docを読んでください.次に、ラッピングPタグを返し、可視テキストのスパン、子のためのスパン、および多かれ少なかれ読むためのボタンをトグルし、あなたの好みにスタイルを設定しますが、この投稿の場合は、以下のスタイルを使用できます.
コンポーネントの最上位で、USStateから「SetShowmore」として「showmore」とその更新コールバックとしてトグル状態を初期化して、初期値をfalseにセットしてください.また、GUAPの隠し要素を参照するために使用されるNULLの初期値をUserefからREF変数“hiddentExtrf”を初期化し、それを隠している'子'小道具をラップするスパンのref属性に渡します.さらに、初期化されたref変数の下にUSElayouteffectフックを呼び出し、コールバック関数を渡します.初期化された“textref”変数とuselayouteffect呼び出しの間に、“const”でtlと呼ばれるrefを初期化し、ussAyouyouteffectコールバック関数の“current”プロパティを更新します.

最後に、私たちはこれらの初期化をしてはいけないと思っていました.次の段階で必要となるので、私は魔法の杖を手に入れるために少しずつ踏み出しています.
ああ、私は戻るので、方法の最初のセットアップで手を汚させましょう.TTL refの更新された現在のプロパティのすぐ下にあるUSElayouteffectコールバック関数内で

tl.current.from(hiddenTextRef.current, { 
height: 0, width: 0, autoAlpha: 0, ...vars, ease: "power2.in" })

そして、依存関係の空の配列をuselayouteffectの2番目の引数として渡します(変数を入れてみて、gsapをおかしく振ってください.次に、USELayoutEffectの下のClickイベントハンドラー関数を作成し、「ShowMore」状態を「False」から「TRUE」に切り替え、ハンドラー内の状態更新のすぐ上に戻ると、この書式がtl.current.reversed() ? tl.current.play() : tl.current.reverse();でタイムラインが反転したかどうかを確認する条件を設定します.ボタンのOnClick属性にハンドラー関数を渡し、「showmore」の状態に応じてボタン内のテキストを「もっと読む」または「少ない表示」に変更する条件を設定します.
そのうえ、我々は隠れたテキストがアニメーション化されることを望みます、しかし、スパンがインラインで、デフォルトでアニメーションされることができないので、それは可能でありません.したがって、表示のプロパティを持つクラスを作成します.インラインブロックとオーバーフロー:そのようなプロパティを持つ非表示またはインラインスタイルで、状態が「true」になったときにこれらのプロパティを削除します.このようにして、隠されたテキストは期待通りにアニメーション化されますが、状態が「true」の場合、目に見えるテキストと同じ行に戻ることができます.ああ!忘れる前に、すべてのレンダリングの後のタイムライン進行を殺すために、クリーンアップ機能を返してください.

最後に、インポートしたいコンポーネントをインポートし、隠したいテキストをラップし、必要な小道具を渡します.VARS小道具は、空のオブジェクトを与えるか、またはGSapをアニメーション化したいプロパティのオブジェクトを渡します.例えば、vars={{ duration: 1 }}またはvars={{ }}.

それはそんなに難しくなかった.私はそれを別の方法を達成する方法についての提案を開いている.