반응형
마지막 요소에만 애니메이션을 적용 하는 Vue.js
나는 Vue 전환 그룹을 연습하고 Vue 문서 예제를 모방하고 있으며, 특히 이 특정 섹션에 있다.
문제는 내 예가 추가/제거되는 요소 대신 엔드 요소에만 애니메이션을 적용한다는 점이다.
내가 뭘 잘못했는지 누가 좀 설명해 줄래? :(고맙다.
<style>
<head>
body{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
margin: 0;
font-family: 'Nunito', sans-serif;
background-color: #101010;
color: white;
text-align: center;
}
.flex{display:flex;justify-content:center;}
.test-enter{
opacity: 0;
transform: translateY(-20px);
}
.test-enter-to{
opacity: 1;
}
.test-leave-to{
opacity: 0;
transform: translateY(20px);
}
.test-enter-active,
.test-leave-active{
transition: 0.5s ease;
}
</style>
</head>
<body>
<br>
<div id='app'>
<button @click='shuffle'>Shuffle</button>
<button @click='add'>Add</button>
<button @click='remove'>Remove</button>
<br><br>
<transition-group name='test' class='flex'>
<div v-for='(num, ind) in arr' :key='ind' style='border: 1px solid red;'>{{ num }}</div>
</transition-group>
</div>
<script>
let theArray = [1,2,3,4,5,6,7,8];
new Vue({
el: '#app',
data: {
arr: theArray
},
computed: {
arrLength(){
return this.arr.length;
}
},
methods: {
shuffle(){
alert('Not working yet');
},
add(){
// Number from 1 - 9.
let ranNum = Math.floor(Math.random()*9+1);
// Get a random index of current array length.
let ranInd = Math.floor(Math.random()*this.arrLength);
this.arr.splice(ranInd, 0, ranNum);
},
remove(){
let ranInd = Math.floor(Math.random()*this.arrLength);
this.arr.splice(ranInd, 1);
}
}
});
</script>
키를 다음으로 변경하십시오.num대신에ind:
<div v-for='(num, ind) in arr' :key='num' style='border: 1px solid red;'>{{ num }}</div>
이는 지수를 애니메이션화하지 않는 숫자의 전환을 허용하기 때문이다.
반응형
'IT이야기' 카테고리의 다른 글
| 가져올 때 Python이 내 모듈을 실행하는 이유와 중지 방법은? (0) | 2022.03.07 |
|---|---|
| Vue.js - url에서 해시방 #!을 제거하는 방법? (0) | 2022.03.07 |
| 리액션의 파일들은 왜 작은 API로 인해 그렇게 큰가? (0) | 2022.03.06 |
| v-html 내부 Vue.js v-model (0) | 2022.03.06 |
| 리디렉션 후 vuejs 글로벌 이벤트를 사용하여 알림 방법 (0) | 2022.03.06 |