css - 如何修复 Vue.js 过渡组中不同尺寸 img 的 v-align 样式？

Question

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

我想在中间垂直对齐，甚至离开或进入数组，但无法以任何方式进行。

另外一个问题，我想解决的是什么时候离开了窗口，过了一会儿又回来了。动画一次运行所有循环以达到当前状态，而不是停止动画并在之后运行。也许这是我的责任，但浏览器没有提供捕捉模糊窗口的好事件，或者我错了吗？ 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>