Vue는 수직 텍스트 스크롤 효과를 인식합니다

VUE에서 수직 텍스트 스크롤 효과를 구현하려면 수직 스크롤을 위해 컨테이너 스타일 (.Vertical-Scroll-Container)을 정의하고 높이 및 오버플로 특성을 설정해야합니다. 텍스트 내용의 스타일 (.Vertical-Scroll-Content)을 정의하고 절대적으로 위치하고 상단에서 위치를 초기화합니다. VUE 구성 요소에서 전환 애니메이션을 사용하여 텍스트 콘텐츠 이동의 애니메이션 효과를 정의하십시오. CSS를 사용하여 전환 효과 (.Vertical-Scroll-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 Animation

다음으로 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!