요구 사항: 페이지를 아래로 내리고 싶은데 상단에 메시지가 뜰 때 어떻게 구현해야 할지 먼저 페이지의 스크롤 이벤트를 사용하는 방법을 생각한 다음 이벤트를 어디에 쓸지 생각해 보세요. 말하자면, 코드를 보세요
<template> <p class="home"> <p id="zz"> <transition name="bounce"> <ap v-show="aa"></ap> </transition> <app></app> <!--<lunBo></lunBo>--> <lunbotu id="lunbotu"></lunbotu> 。。。。 </p> </p></template>
위 코드의 상단에는 ap 구성 요소의 내용이 표시됩니다. 여기서 v-show는 이를 표시할지 여부를 결정하는 데 사용됩니다. 모듈 속도를 늦추기 위해 애니메이션 효과를 사용합니다. . 여기서 주목해야 할 점은 전환에 class 속성이 아닌 name 속성이 사용된다는 점입니다
<script> import ap from './app.vue' import app from './header-app.vue' import lunBo from './lunbo.vue' ...... export default{ data () { return { scroll: '', aa: false } }, components: { ap, app, ...... }, mounted () { window.addEventListener('scroll', this.menu) }, methods: { menu () { this.scroll = document.body.scrollTop if (this.scroll >= 115) { this.aa = true } else { this.aa = false } } } } </script>
여기서의 코드는 페이지 스크롤 이벤트를 처리하는 코드입니다. 애니메이션 이벤트를 처리하는 방법을 살펴보겠습니다
<style> .bounce-enter-active { animation: bounce-in .5s; } .bounce-leave-active { animation: bounce-out .5s; } @keyframes bounce-in { 0% { transform: translateY(-85px); } /*50% {*/ /*transform: translateY(-45px);*/ /*}*/ 100% { transform: translateY(0); } } @keyframes bounce-out { 0% { transform: translateY(0); } /*50% {*/ /*transform: translateY(-45px);*/ /*}*/ 100% { transform: translateY(-85px); } }</style>
위의 코드는 애니메이션 이벤트를 처리하는 것입니다. 여기서는 맞춤 이벤트가 사용됩니다.
위 내용은 애니메이션 효과를 사용하여 Vue에서 스크롤 이벤트를 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!