Vue의 v-for에 대한 간략한 설명, 키 값이 전환 효과와 애니메이션 효과에 영향을 미칩니다(자세한 코드 설명).

이전 글 "Vue를 사용하여 애니메이션 효과를 얻는 방법을 가르쳐주세요(코드 포함)"에서는 Vue를 사용하여 애니메이션 효과를 얻는 방법을 소개했습니다. 다음 글에서는 Vue의 핵심 값이 전환 효과와 애니메이션 효과에 미치는 영향에 대해 간략하게 소개하겠습니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

Vue.js의 v-for에 대해 key의 순서 변경이 전환 애니메이션 성능에 영향을 줍니다 강> Vue.js的v-for，key的顺序改变，影响过渡动画表现

关于Vue.js的v-for，key的取值，影响过渡动画表现这个问题是在写Message组件出现的，先看代码部分

子组件：

<!-- Notice： -->
<transition :name="transitionName" @enter="enter" @leave="leave">
  ...... ..
</transition>
<!-- JS: -->
<script>
  export default {
    methods: {
      enter(e) {
        e.style.height = e.scrollHeight + "px";
      },
      leave(e) {
        e.style.height = 0;
      },
    },
  };
</script>
<!-- CSS: -->
<style>
  transition: all 0.2s ease-in-out;
</style>

父组件：

<notice v-for="(item, index) in notices" :key="index">
  ......
</notice>

JS：

data() {
    return {
      notices: []
    };
  },
  //notices 新增的时候自动加入定时器来移除
  setTimeout(() => {
    let index = 0 //这里假设我已经取得了移除的 index索引, 可能不是依次的123456
    this.notices.splice(index, 1);
  }, time) //time 为传入的随机不等值

理论上当某一个子组件被移除时，他会有一个流畅的高度从 1 到 0 到过度动画，但是不然，每次移除时，动画每次只会应用到最后一个。百思不解，各种js，css实现都不是很理想。依然一卡一卡的。 

又去官网把文档翻了一遍。 找出了问题所在。for遍历的时候，有一个值很重要：key当key取值为Number时，每次数组被改变，dom会重新渲染，所以动画每次只会影响最后一个。

当key取值为String时，每次数组被改变，dom则默认用“就地复用”策略

所以把key改为String时，则就是我想要当结果，流畅的依次性的执行了动画，完美官网的例子https://cn.vuejs.org/v2/guide/list.html#key

这里需要注意的是，key的取值为String／Number，所以测试时key值为了避免不重复，应该取值为随机的不重复string/number, 不要使用默认的index

Vue.js의 v-for와 key 값이 전환 애니메이션 성능에 어떤 영향을 미치는지에 대한 문제에 대해, 메시지를 작성 중입니다. 구성 요소가 나타나면 코드 부분을 먼저 살펴보세요

하위 구성 요소:

rrreee

상위 구성 요소:

rrreee

JS:

rrreee이론적으로 하위 구성 요소가 제거되면 1 에서 0까지 부드러운 높이를 갖게 됩니다. 애니메이션을 전환하려는 경우, 그렇지 않으면 제거할 때마다 애니메이션은 한 번에 마지막 애니메이션에만 적용됩니다. 모든 종류의 js, css 구현이 그다지 이상적이지 않다는 사실에 의아해합니다. 아직도 계속해서 붙어 있습니다.

공식 홈페이지에 가서 문서를 다시 읽어보세요. 문제를 발견했습니다. for가 순회할 때 하나의 값이 매우 중요합니다: key key의 값이 Number일 때마다 숫자 그룹이 변경되면 dom이 다시 렌더링되므로 애니메이션은 한 번에 마지막 항목에만 영향을 미칩니다.

key의 값이 String인 경우 배열이 변경될 때마다 dom은 다음과 같은 방법으로 "내부 재사용" 전략을 사용합니다. default🎜🎜 🎜그래서 키를 String으로 변경하면 결과가 원활하고 순차적으로 실행되기를 원합니다. 완벽한 공식 웹 사이트 https://cn.vuejs.org/v2/guide/list.html#key의 예입니다. 🎜 🎜🎜여기서 key의 값은 String/Number이므로 key의 값은 > 테스트 중 중복되지 않도록 하려면 값은 중복되지 않은 임의의 문자열/숫자여야 하며 기본 색인을 사용하지 마세요. 코드>. 🎜🎜[끝]🎜🎜추천 학습: 🎜JavaScript 비디오 튜토리얼🎜🎜

위 내용은 Vue의 v-for에 대한 간략한 설명, 키 값이 전환 효과와 애니메이션 효과에 영향을 미칩니다(자세한 코드 설명).의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!