0
내가 필요한 이미지 슬라이더 예제를 만들었습니다. 다양한 크기의 이미지를 사용할 때 스타일 문제가 발생합니다. 요소가 배열을 떠날 때 그 위치는 절대 값으로 설정되고, 부드러운 전환을 위해 필요한 것은 무엇입니까, 그러나 이미지도 위로 이동합니다.Vue.js transition-group에서 크기가 다른 img의 v-align 스타일을 수정하는 방법은 무엇입니까?
중간에 정렬하거나 배열에 들어가기에 좋은 수직 정렬을하고 싶습니다. 그러나 어떤 식 으로든 얻을 수는 없습니다.
또 다른 문제는 내가 해결하고 싶은 것은 잠시 후 창을 나온 다음 다시 돌아 왔을 때입니다. 한 번에 모든주기를 실행하는 애니메이션은 애니메이션을 멈추고 실행하는 대신 현재 상태에 도달합니다. 어쩌면 그것은 내 책임이지만 브라우저는 블러 윈도우를 잡기 위해 좋은 이벤트를 제공하지 않거나 잘못 되었습니까? According to this discussion
어떤 아이디어 주셔서 감사합니다.
let numbers = [{key:1},{key:2},{key:3},{key:4},{key:5},{key:6},{key:7}]
let images = [
{ key:1,
src:"http://lorempixel.com/50/100/sports/"},
{ key:2,
src:"http://lorempixel.com/50/50/sports/"},
{ key:3,
src:"http://lorempixel.com/100/50/sports/"},
{ key:4,
src:"http://lorempixel.com/20/30/sports/"},
{ key:5,
src:"http://lorempixel.com/80/20/sports/"},
{ key:6,
src:"http://lorempixel.com/20/80/sports/"},
{ key:7,
src:"http://lorempixel.com/100/100/sports/"}
]
new Vue({
el: '#rotator',
data: {
items: images,
lastKey: 7,
direction: false
},
mounted() {
setInterval(() => {
if (this.direction) { this.prevr() } else { this.nextr() }
}, 1000)
},
methods: {
nextr() {
\t let it = this.items.shift()
it.key = ++this.lastKey
this.items.push(it)
},
prevr() {
\t let it = this.items.pop()
it.key = ++this.lastKey
this.items.unshift(it)
}
}
}).litem {
transition: all 1s;
display: inline-block;
margin-right: 10px;
border: 1px solid green;
background-color: lightgreen;
padding: 10px 10px 10px 10px;
height: 100px;
}
.innerDiv {
border: 1px solid red;
}
.container {
overflow: hidden;
white-space: nowrap;
height: 250px;
border: 1px solid blue;
background-color: lightblue;
}
.list-enter {
opacity: 0;
transform: translateX(40px);
}
.list-leave-to {
opacity: 0;
transform: translateX(-40px);
}
.list-leave-active {
position: absolute;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.11/vue.js"></script>
<div id="rotator">
<button @click="direction = !direction">
change direction
</button>
<transition-group
name="list"
tag="div"
class="container">
<div
v-for="item in items"
:key="item.key" class="litem">
<!--
<div
class='innerDiv'>
{{ item.key }}
</div>
-->
<div class='innerDiv'>
<img :src='item.src'>
</div>
</div>
</transition-group>
</div>