Programing

VueJS에서 애니메이션에 jQuery를 계속 사용해야 하는가?

c10106 2022. 4. 16. 09:37
반응형

VueJS에서 애니메이션에 jQuery를 계속 사용해야 하는가?

현재 구성 요소의 메서드 개체 내에 다음 코드가 있는 경우:

startImageAnimation() {
    $('.splash-image').fadeIn(1400, () => {
        setTimeout(function() {
            $('.splash-image').fadeOut(1400, () => {
                setTimeout(() => {
                    $('.splash-screen').fadeOut(600);
                });
            });
        }, 1000);
    });
},

나는 정말로 Vue 전환기를 이용하여 그것에 대한 방법을 찾으려고 노력했지만, jQuery를 사용하기에는 너무 어려워 보인다.

여기서 진짜 질문은: 나는 여전히 이런 상황에서 코딩을 해야 하는가 아니면 다른 방식으로 접근해야 하는가 이다.jQuery animate()나 jQuery가 순수 JS보다 훨씬 쉽게 만드는 다른 방법에서도 마찬가지다.

고마워!

나는 개인적으로 원소가 직접적으로 아니라 그것과 연결된 속성을 애니메이션을 만드는 것을 선호한다.예를 들어 다음과 같은 코드를 사용할 수 있다.

<div class="splash-screen" :style={opacity: splashOpacity}>

어디에splashOpacity에 의해 반환된 객체의 속성dataVue 구성 요소 방법.그리고 나서 나는 부드럽게 변한다.splashOpacity, vie 둘 중 하나.setInterval그린삭 같은 도서관 같은 거 말이야짧은 예:

data () {
    return {
       splashOpacity: 0 
    }
},

startImageAnimation () {
    TweenLite.to(this, 1, {
       splashOpacity: 1
    }); 
}

참조URL: https://stackoverflow.com/questions/44160550/should-i-still-use-jquery-to-animations-in-vuejs

반응형