JavaScript를 사용하여 Vue3에서 애니메이션을 구현하는 방법은 무엇입니까?
- WBOY앞으로
- 2023-05-09 23:34:061164검색
개요
실제로 애니메이션은 CSS뿐만 아니라 js를 사용해도 구현할 수 있습니다. 둘의 차이점은 무엇인가요? CSS는 애니메이션 표시에 더 신경을 써서 성능이 좋은 반면, js 메서드는 성능이 약간 떨어지지만 애니메이션 실행 과정마다 추가 작업을 할 수 있습니다. 즉, 애니메이션 실행의 시작부터 실행까지의 과정을 CSS를 사용하면 기껏해야 애니메이션을 표시하는 것만으로도 애니메이션의 속성을 제어할 수 있습니다. js를 사용하면 애니메이션 실행 시작 부분에서 dom 요소를 조작하고 원하는 효과를 추가할 수 있습니다. 애니메이션 실행이 끝나면 대화 상자를 팝업하는 등 애니메이션을 종료하는 몇 가지 작업을 수행할 수 있습니다. js를 사용하여 구현하는 것이 더 편리합니다.
분석 예
효과를 얻고 싶다고 가정해 보겠습니다. "hello world"의 글꼴 색상이 1초에 한 번씩 빨간색과 녹색으로 바뀌고, 5초 후에 종료되고, 종료 후 대화 상자가 팝업되고,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>使用JS实现动画</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="root"></div>
</body>
<script>
const app = Vue.createApp({
data() {
return {
show:false
}
},
methods: {
handleClick(){
this.show = !this.show;
},
handleBeforeEnter(el){
el.style.color = 'red';
},
handleEnterActive(el, done){
const animation = setInterval(() => {
const color = el.style.color;
if(color === 'red'){
el.style.color = 'green';
}else{
el.style.color = 'red';
}
},1000);
setTimeout(() =>{
clearInterval(animation);
done();// 通知下一个函数的执行
},5000);
},
handleEnterEnd(){
alert(123);
}
},
template:
`
<transition
:css="false"
@before-enter="handleBeforeEnter"
@enter="handleEnterActive"
@after-enter="handleEnterEnd">
<div v-if="show" >hello world </div>
</transition>
<button @click="handleClick">switch</button>
`
});
const vm = app.mount('#root');
</script>
</html> 위 코드에서 전환 태그에서 :css = "false"를 사용하는 것을 볼 수 있습니다. 이는 애니메이션에 js를 사용하기를 원하기 때문입니다. 먼저 CSS를 비활성화한 다음 @before-enter="handleBeforeEnter", @enter="handleEnterActive" 및 @after-enter를 구현해야 합니다. 시작하기 전에 애니메이션이 실행되고 애니메이션이 종료됩니다. handleBeforeEnter, handleEnterActive, handleEnterEnd는 세 가지 단계에 해당하는 js이며, 이러한 함수에서 수행하려는 작업을 수행할 수 있습니다. 이 예에서는 :css = "false" 这是因为我们要使用js做动画，所以要先禁用掉css，然后分别实现了@before-enter="handleBeforeEnter", @enter="handleEnterActive" ,@after-enter 分别对应动画开始前，动画执行中，动画执行结束，而后面的handleBeforeEnter,handleEnterActive,handleEnterEnd三个函数是对应三个阶段的js函数，我们可以在这几个函数中执行我们想要执行的操作。在本例中：
handleBeforeEnter(el)
{
el.style.color = 'red';
}动画执行前我们将文本的颜色设置成红色
当动画执行的时候
handleEnterActive(el, done){
const animation = setInterval(() => {
const color = el.style.color;
if(color === 'red'){
el.style.color = 'green';
}else{
el.style.color = 'red';
}
},1000);
setTimeout(() =>{
clearInterval(animation);
done();// 通知下一个函数的执行
},5000);
}动画执行的时候，我们隔1秒去判断当前文本的颜色，如果是红色，则改成绿色，如果是绿色则改成红色，然后持续5秒结束。
当动画结束的时候
handleEnterEnd(){
alert(123);
}动画结束后，会执行handleEnterEndrrreee
handleEnterEnd가 실행되고 대화상자가 뜨면서 123이 나옵니다.🎜위 내용은 JavaScript를 사용하여 Vue3에서 애니메이션을 구현하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!