Vue의 전환을 사용하여 슬라이딩 전환을 완료하는 방법
- 不言원래의
- 2018-06-26 09:38:162776검색
이 글에서는 주로 Vue의 전환을 사용하여 슬라이딩 전환을 완성하기 위한 샘플 코드를 소개합니다. 편집자는 꽤 좋다고 생각하여 지금 공유하고 참고용으로 제공하겠습니다. 에디터를 따라가서 살펴볼까요
vue를 사용하여 작은 애니메이션 효과를 만드는 것은 매우 편리합니다. 오늘은 vue의 전환을 사용하여 슬라이딩 전환 효과를 완성해 보고자 합니다.
소스코드 바로가기:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue滑动效果</title>
<style>
.d {
position: absolute;
border: 1px solid red;
width: 30px;
height: 30px;
}
@keyframes show {
0% {
opacity: 0;
left: 32px;
}
100% {
opacity: 1;
left: 0;
}
}
@keyframes hide {
0% {
opacity: 1;
left: 0;
}
100% {
opacity: 0;
left: -32px;
}
}
.show-enter-active {
animation: show 1.2s;
}
.show-leave-active {
animation: hide 1.2s;
}
.show-enter, .show-leave-to {
opacity: 0;
}
.wrap {
position: relative;
width: 32px;
height: 32px;
}
</style>
<script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
</head>
<body>
<p id="app">
<p>{{ message }}</p>
<p class="wrap">
<transition name="show">
<p class="d" v-for="item in list" :key="item.id" v-if="count === item.id">
{{ item.text }}
</p>
</transition>
</p>
<button @click="add">add</button>
</p>
<script>
new Vue({
el: '#app',
data () {
return {
message: 'Hello Vue.js!',
count: 0,
list: [
{id: 0, text: 'aaa'},
{id: 1, text: 'bbb'},
{id: 2, text: 'ccc'}
]
}
},
methods: {
add: function () {
if (this.count < this.list.length - 1) {
this.count += 1;
} else {
this.count = 0;
}
}
}
})
</script>
</body>
</html>
여기서 주목해야 할 점은 부모는 상대값을 사용하고, 자식은 위치 지정에 절대값을 사용하며, 왼쪽 값은 위치 제어에 사용된다는 점입니다. 여기서 변환을 사용하면 이전 p가 점진적으로 사라지는 과정을 거치기 때문에 이 과정에서 항상 그 위치가 존재하게 되어 뒤따르는 p가 해당 위치로 올바르게 이동할 수 없게 되므로 절대값을 사용하는 것이 좋습니다.
실제로 작동하지 않으면 전환의 모드 속성을 사용하여 out-in으로 설정하면 전자가 먼저 애니메이션을 완료하여 다음 p가 이동할 수 있도록 점유된 위치가 완전히 사라지도록 할 수 있습니다. 그러나 이 방법은 애니메이션을 하나씩 완료할 수 있을 뿐 동시에 애니메이션을 완료할 수는 없습니다.
위 내용은 이 글의 전체 내용입니다. 모든 분들의 학습에 도움이 되었으면 좋겠습니다. 더 많은 관련 내용은 PHP 중국어 홈페이지를 주목해주세요!
관련 권장 사항:
Vue 모바일 터미널을 사용하여 이미지 자르기 구성 요소를 구현하는 방법
vue2에서 데이터 요청 표시 로딩 그래프를 구현하는 방법
위 내용은 Vue의 전환을 사용하여 슬라이딩 전환을 완료하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!