为啥从Vue.js中的列表中删除项目时移动转换需要绝对位置

Posted 2023-02-22

【中文标题】为啥从Vue.js中的列表中删除项目时移动转换需要绝对位置

【英文标题】：Why is position absolute needed for move transition when removing item from list in Vue.js为什么从Vue.js中的列表中删除项目时移动转换需要绝对位置

【发布时间】：2019-03-24 21:51:11

【问题描述】：

https://vuejs.org/v2/guide/transitions.html#List-Move-Transitions 给出了一个示例，当从列表中删除一个项目时，其他项目平滑地移动到它的位置。为此，该元素的样式为：

.list-complete-leave-active 
  position: absolute;

我想知道为什么没有这个就不行？

new Vue(
  el: '#list-complete-demo',
  data: 
    items: [1,2,3,4,5,6,7,8,9]
  ,
  methods: 
    randomIndex: function () 
      return Math.floor(Math.random() * this.items.length)
    ,
    remove: function () 
      this.items.splice(this.randomIndex(), 1)
    
  
)

.list-complete-item 
  transition: all 1s;
  display: inline-block;
  margin-right: 10px;

.list-complete-leave-to 
  opacity: 0;
  transform: translateY(30px);

.list-complete-leave-active 
  position: absolute;

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.14.1/lodash.min.js"></script>

<div id="list-complete-demo" class="demo">
  <button v-on:click="remove">Remove</button>
  <transition-group name="list-complete" tag="p">
    <span
      v-for="item in items"
      v-bind:key="item"
      class="list-complete-item"
    >
       item 
    </span>
  </transition-group>
</div>

【参考方案1】：

在这种情况下，主动移除数字的位置从static设置为absolute，这样该元素就不会占用任何空间。为什么这很重要？动画将其余数字向左滑动，如果删除的项目占用空间，则不会发生这种情况。例如，您可以将其替换为position: fixed 或margin-right: -8px。所有这些都会将边界框从大约 18 像素（距离数字 8 像素，距离边缘 10 像素）设置为 0 像素，将其余的内联定位项整齐地向左滑动。

new Vue(
  el: '#list-complete-demo',
  data: 
    items: [1,2,3,4,5,6,7,8,9]
  ,
  methods: 
    randomIndex: function () 
      return Math.floor(0)
    ,
    remove: function () 
      this.items.splice(this.randomIndex(), 1)
    
  
)

.list-complete-item 
  transition: all 10s;
  display: inline-block;
  margin-right: 10px;

.list-complete-leave-to 
  opacity: 0;
  transform: translateY(30px);

.list-complete-leave-active 
  position: absolute;

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.14.1/lodash.min.js"></script>

<div id="list-complete-demo" class="demo">
  <button v-on:click="remove">Remove</button>
  <transition-group name="list-complete" tag="p">
    <span
      v-for="item in items"
      v-bind:key="item"
      class="list-complete-item"
    >
       item 
    </span>
  </transition-group>
</div>