如何修复 Vue.js 转换组中不同大小的 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>