이안리
157
2021-05-06 15:44:41
2
106

Vue 스크롤 이벤트 질문드립니다



<template>
  <div>
    <transition name="fade">
      <div v-if="show" class="image">
          <img class="phoneImage" src="../assets/iPhone.png">
      </div>
    </transition>
  </div>
</template>

<script>
export default {
  name: 'Card2',
    data(){
      return{
        show: false,
        scrollPosition: null
      }
    },
    methods: {
      updateScroll(){
        this.scrollPosition = window.scrollY || document.documentElement.scrollTop;
      },
      showImage(){
        if(this.scrollPosition > 1000){
          this.show = true;
        } else {
          this.show = false;
        }
      }
    },
    mounted(){
      window.addEventListener('scroll', this.updateScroll);
    },
}
</script>

<style>
.fade-enter-from {
  opacity: 0;
  transform: translateY(150px);
}

.fade-enter-active {
  transition: all 1s ease;
}

.fade-enter-to {
  opacity: 1;
  transform: translateY(0px);
}
</style>


안녕하세요. 

https://www.kakaobank.com/


카카오뱅크 처럼 스크롤바를 내릴때 애니메이션 모션 효과를 주고 싶습니다.


위의 코드처럼 구현을 했지만 스크롤바 위치가 1000이 넘었는데도 효과가 나타나질않네요..


토글 버튼을 만들면 애니메이션이 나오는데 왜 스크롤 코드가 적용이 안될까요.. (크롬에서 했습니다)

0