如何在Vue.js transition-group中为不同大小的img修复v-align样式？

Question

我准备了我需要的图像滑块的例子。在使用各种尺寸的图像时遇到样式问题。当元素离开数组时，其位置被设置为绝对值，平滑过渡所需的是什么，但是图像也向上移动。

我想有很好的垂直对齐到中间甚至离开或进入阵列，但无法以任何方式。

另一个问题，我想解决的是离开窗户然后过了一会儿就回去了。动画一次运行所有循环以达到当前状态而不是停止动画并运行之后。也许这是我的责任，但浏览器不提供很好的事件来捕捉模糊窗口或我错了吗？ 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 () {
    	let it = this.items.shift()
      it.key = ++this.lastKey
      this.items.push(it)
    },
    prevr () {
    	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>

Answer 1

它花了一段时间，但最后我认为我有更好的结果，以改变方向功能滑动动画。

一个恼人的想法是，当我切换滑动方向时，动画是'微秒'变为下一个状态而不是返回到正确的一个，之后动画继续按预期进行。它只发生在一个方向，我不知道如何解决它。最后一个框也只有一次表现不同。根本没有任何线索。

所以只有98％的解决方案:-)

let images = [
  {key:1, domKey:1, src:"http://lorempixel.com/50/100/sports/"  },
  {key:2, domKey:2, src:"http://lorempixel.com/50/50/sports/"   },
  {key:3, domKey:3, src:"http://lorempixel.com/100/50/sports/"  },
  {key:4, domKey:4, src:"http://lorempixel.com/20/30/sports/"   },
  {key:5, domKey:5, src:"http://lorempixel.com/80/20/sports/"   },
  {key:6, domKey:6, src:"http://lorempixel.com/20/80/sports/"   },
  {key:7, domKey:7, src:"http://lorempixel.com/100/100/sports/" }
]

let setPositionRelative = el => el.style.position = "relative"

new Vue({
  el: '#rotator',
  data: {
    items: images,
    lastKey: 7,
    direction: true,
    changeDirectionRequest: false
  },
  mounted () {
  	Array.from(this.$el.querySelectorAll("div[data-key]")).map(setPositionRelative)
    setInterval(() => {
      if(this.changeDirectionRequest) {
        this.changeDirectionRequest = false
        this.direction = !this.direction
        if (this.direction) 
        	Array.from(this.$el.querySelectorAll("div[data-key]")).map(setPositionRelative)
        else 
        	Array.from(this.$el.querySelectorAll("div[data-key]")).map(el => el.style.position = "")
      } 
      if (this.direction) this.prevr() 
      else this.nextr()
    }, 1000)
  },
  methods: {
    nextr () {
      let it = this.items.shift()
      it.key = ++this.lastKey
      this.items.push(it)
    },
    prevr () {
    	let it = this.items.pop()
      it.key = ++this.lastKey
      this.items.unshift(it)
      setPositionRelative(this.$el.querySelector("div[data-domkey='"+it.domKey+"']"))
    }
	}
})

.container {
  overflow: hidden;
  white-space: nowrap;
  height: 200px;
  border: 1px solid blue;
  background-color: lightblue;
  display: flex;
  align-items: center;
}
.innerDiv {
  border: 1px solid red;
  width: auto; 
  height: auto; 

  display:-moz-box; 
  -moz-box-pack:center; 
  -moz-box-align:center; 

  display:-webkit-box; 
  -webkit-box-pack:center; 
  -webkit-box-align:center; 

  display:box; 
  box-pack:center; 
  box-align:center;
}
.litem {
  transition: all 1s;
  margin-right: 10px;
  border: 1px solid green;
  background-color: lightgreen;
  padding: 10px 10px 10px 10px;
}
.list2-enter, .list-enter {
  opacity: 0;
  transform: translateX(40px);
}
.list2-leave-to, .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="changeDirectionRequest = true">change direction</button>
  <transition-group name="list" tag="div" class="container">
    <div   v-for="item in items" 
          :key="item.key" 
          :data-domkey="item.domKey" 
          class="litem">
          
       <div class='innerDiv'>
          <img :src='item.src'>
        </div>
    </div>
  </transition-group>
</div>