0

我在尝试为从列表中删除的项目设置动画时遇到问题（使用转换组）。布局非常简单。屏幕顶部有一个错误列表，该列表下方有一个按钮，用于从错误数组中删除最后一个元素。这种布局一切正常。当在列表和按钮之间添加一些内容时，问题就开始了。如果内容大到足以将错误列表推出视口，则当按下按钮时，内容会“闪烁”（或“抖动”）。奇怪的是，这种行为不会在 jsfiddle ( https://jsfiddle.net/gaqmbr7s/ ) 中复制，但只有在我在本地运行项目时才会复制。

这是演示此行为的屏幕记录

这是我的代码：

模板（添加了一些虚拟内容）：

<template>
  <div>
    <transition-group name="height-fade-out">
      <div v-for="error in errors" :key="error.id" class="error">
        {{ error.msg }}
      </div>
    </transition-group>

    <div>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Et cupiditate harum officia dignissimos dolorem iusto eveniet odio minima veniam porro tenetur ut iste ex at delectus cum, culpa soluta
        dicta!
      </p>
      <br />
      <br />
      <br />
      <br />
      <h2>Some content</h2>

      <input type="text" />

      <br />
      <br />
      <br />
      <br />

      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Et cupiditate harum officia dignissimos dolorem iusto eveniet odio minima veniam porro tenetur ut iste ex at delectus cum, culpa soluta
        dicta!
      </p>
      <br />
      <br />
      <br />
      <br />
      <h2>Some content</h2>

      <input type="text" />

      <br />
      <br />
      <br />
      <br />

      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Et cupiditate harum officia dignissimos dolorem iusto eveniet odio minima veniam porro tenetur ut iste ex at delectus cum, culpa soluta
        dicta!
      </p>
      <br />
      <br />
      <br />
      <br />
      <h2>Some content</h2>

      <input type="text" />

      <br />
      <br />
      <br />
      <br />

      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Et cupiditate harum officia dignissimos dolorem iusto eveniet odio minima veniam porro tenetur ut iste ex at delectus cum, culpa soluta
        dicta!
      </p>
      <br />
      <br />
      <br />
      <br />
      <h2>Some content</h2>

      <input type="text" />

      <br />
      <br />
      <br />
      <br />
    </div>

    <button @click="removeError">remove error</button>
  </div>
</template>

Javascript：

<script>
export default {
  name: 'App',
  data() {
    return {
      errors: [
        { id: 1, msg: 'error 1' },
        { id: 2, msg: 'error 2' },
        { id: 3, msg: 'error 3' },
        { id: 4, msg: 'error 4' },
      ],
    };
  },
  methods: {
    removeError() {
      this.errors.pop();
    },
  },
};
</script>

款式：

<style>
.error {
  display: flex;
  flex-direction: row;
  padding: 8px 12px;
  margin-top: 5px;
  overflow: hidden;
  border-radius: 3px;
  background-color: rgba(253, 196, 162, 0.2);
  max-height: 100px;
}

.height-fade-out-enter-active {
  transition: opacity 0.5s;
}

.height-fade-out-enter {
  opacity: 0;
}

.height-fade-out-leave-active {
  transition: all 0.5s ease-out;
}

.height-fade-out-leave-to {
  opacity: 0;
  max-height: 0;
  margin: 0;
  padding-top: 0;
  padding-bottom: 0;
}
</style>
4

0 回答 0