Vueは垂直テキストスクロール効果を実現します

VUEに垂直テキストスクロール効果を実装するには、垂直スクロールのためにコンテナスタイル（.ver​​tical-scroll-container）を定義し、その高さとオーバーフローの特性を設定する必要があります。テキストコンテンツのスタイル（.ver​​tical-scroll-content）を定義し、絶対に配置し、上部の位置を初期化します。 Vueコンポーネントのトランジションアニメーションを使用して、テキストコンテンツの動きのアニメーション効果を定義します。 CSSを使用して、遷移効果（.ver​​tical-croll-enter-activeおよび.vertical-scroll-leave-active）を定義し、遷移時間と遷移タイプを設定します。

Vueは垂直テキストスクロール効果を実現します

VUEで垂直テキストスクロールを実現するには、CSSとVUEの遷移アニメーション関数を使用する必要があります。

CSS

まず、CSSを使用して、垂直スクロールコンテナスタイルを定義します。

 <code class="css">.vertical-scroll-container { height: 500px; /* 容器高度*/ overflow: hidden; position: relative; }</code>

次に、テキストコンテンツのスタイルを定義します。

 <code class="css">.vertical-scroll-content { position: absolute; top: 0; /* 初始位置*/ height: 100%; white-space: nowrap; }</code>

Vue Transitionアニメーション

次に、Vueコンポーネントでは、 transitionアニメーションを使用して、テキストコンテンツの動きを制御します。

 <code class="vue"><template> <div class="vertical-scroll-container"> <transition name="vertical-scroll"> <div class="vertical-scroll-content">{{ text }}</div> </transition> </div> </template> <script> import { ref } from &#39;vue&#39; export default { setup() { const text = ref(&#39;垂直滚动文本&#39;) return { text } } } </script></code>

CSS遷移効果

最後に、CSSを使用して遷移効果を定義します。

 <code class="css">.vertical-scroll-enter-active, .vertical-scroll-leave-active { transition: top 1s ease-in-out; } .vertical-scroll-enter-from { top: 100%; /* 从顶部进入*/ } .vertical-scroll-leave-to { top: -100%; /* 离开到底部*/ }</code>

ランニング効果

Vueはtextデータが変更されたときに遷移アニメーションをトリガーします。テキストコンテンツは上部からコンテナに入り、下にスクロールし、最後にコンテナを下から残します。

注意すべきこと

• コンテナがすべてのテキストコンテンツを保持するのに十分な大きさであることを確認してください。
• スクロール効果をカスタマイズするために、必要に応じてtopと移行時間を調整できます。

以上がVueは垂直テキストスクロール効果を実現しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。