Vue3 목록 애니메이션 및 상태 애니메이션 적용 방법
- 王林앞으로
- 2023-05-22 09:43:191321검색
개요
목록 애니메이션과 상태 애니메이션은 모두 사용자 경험을 향상시키는 방법입니다. 목록에서 데이터를 추가하거나 제거할 때 직접 추가하여 갑자기 표시하면 약간 갑작스러워지고 사용자는 데이터가 추가되고 목록에서 데이터가 제거되면 사용자는 어떤 데이터가 제거되었는지 알 수 없습니다. 흥미로운 애니메이션은 매우 매력적이며 사용자가 새로운 데이터와 제거된 데이터에 주의를 기울이는 데 도움이 되므로 애니메이션을 추가하면 사용자 경험이 향상될 수 있습니다. 이것이 목록 애니메이션이고, 상태 애니메이션은 한 상태에서 다른 상태로 바뀌는 것을 말합니다. 직접적으로 바꾸면 딱딱해 보일 수 있지만, 천천히 전환되도록 애니메이션을 추가하면 훨씬 나아질 것입니다.
예제 분석
목록 애니메이션
위 그림과 같이 숫자 목록을 표시하려고 합니다. 오른쪽에 버튼을 클릭하면 숫자가 늘어나는 애니메이션이 실행됩니다. 코드는 다음과 같습니다.
<!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>列表动画</title>
<style>
.list-item{
display: inline-block;
margin-right: 10px;
}
.v-enter-from{
opacity: 0;
transform: translateY(30px);
}
.v-enter-active{
transition: all 1s ease-in;
}
.v-enter-to{
opacity: 1;
transform: translateY(0px);
}
.v-move{
transition: 2.5s ease-in;
}
</style>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="root"></div>
</body>
<script>
const app = Vue.createApp({
data() {
return {
list:[1,2,3]
}
},
methods: {
handleClick(){
this.list.unshift(this.list.length+1);
}
},
template:
`
<div>
<transition-group>
<span class="list-item" v-for = "item in list" :key="item">{{item}}</span>
</transition-group>
<button @click="handleClick">add</button>
</div>
`
});
const vm = app.mount('#root');
</script> 먼저 CSS를 사용하여 목록의 애니메이션 효과를 정의합니다. 이 효과는 앞서 언급한 애니메이션 정의와 유사합니다. 여기서는 애니메이션을 정의한 후에는 자세히 설명하지 않겠습니다. Vue 템플릿에서 숫자 목록이 표시됩니다. 가장 중요한 것은 <transition-group></transition-group> 태그를 사용하여 애니메이션하려는 부분을 래핑한다는 것입니다. 버튼을 클릭하면 js 함수가 실행되어 목록 길이에 1을 더한 숫자를 목록에 추가합니다. 독자들은 이를 실행하여 애니메이션 효과를 볼 수 있다.
상태 애니메이션
상태 애니메이션은 비교적 간단합니다. 즉, 한 상태에서 다른 상태로 일부 전환 값을 추가하는 것입니다. 주로 1에서 10으로 변경하는 등 데이터를 통해 콘텐츠 표시를 제어합니다. 1로 바로 바뀌면 바로 바뀌겠지만 10이 되면 굉장히 딱딱해 보이는데, 중간에 2, 3, 4... 등 다른 숫자를 추가하고 최종적으로 10으로 바꾸는 게 훨씬 나을 것 같습니다. 코드는 다음과 같습니다.
<!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>状态动画</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="root"></div>
</body>
<script>
// 状态动画：通过数据控制内容的展示
const app = Vue.createApp({
data() {
return {
number:1,
animateNumber: 1
}
},
methods: {
handleClick(){
this.number =10;
if(this.animateNumber<this.number){
const animation = setInterval(()=>{
this.animateNumber += 1;
if(this.animateNumber === 10){
clearInterval(animation)
}
},100);
}
}
},
template:
`
<div>
<div>{{animateNumber}}</div>
<button @click="handleClick">do</button>
</div>
`
});
const vm = app.mount('#root');
</script>목록 애니메이션은 비교적 간단합니다. 실행 버튼을 클릭하면 js 함수를 사용하여 100밀리초마다 현재 표시된 값을 수정하고 해당 값이 최종 원하는 값이 될 때까지 중지합니다. 상태.
위 내용은 Vue3 목록 애니메이션 및 상태 애니메이션 적용 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!