이전 글 "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
값이 전환 애니메이션 성능에 어떤 영향을 미치는지에 대한 문제에 대해, 메시지를 작성 중입니다.
구성 요소가 나타나면 코드 부분을 먼저 살펴보세요
1
에서 0
까지 부드러운 높이를 갖게 됩니다. 애니메이션을 전환하려는 경우, 그렇지 않으면 제거할 때마다 애니메이션은 한 번에 마지막 애니메이션에만 적용됩니다. 모든 종류의 js
, css
구현이 그다지 이상적이지 않다는 사실에 의아해합니다. 아직도 계속해서 붙어 있습니다.
key
의 값이 String
인 경우 배열이 변경될 때마다 dom
은 다음과 같은 방법으로 "내부 재사용" 전략을 사용합니다. default🎜🎜 🎜그래서 키를 String으로 변경하면 결과가 원활하고 순차적으로 실행되기를 원합니다. 완벽한 공식 웹 사이트 https://cn.vuejs.org/v2/guide/list.html#key의 예입니다. 🎜 🎜🎜여기서 key
의 값은 String
/Number
이므로 key
의 값은 > 테스트 중 중복되지 않도록 하려면 값은 중복되지 않은 임의의 문자열
/숫자
여야 하며 기본 색인
을 사용하지 마세요. 코드>. 🎜🎜[끝]🎜🎜추천 학습: 🎜JavaScript 비디오 튜토리얼🎜🎜위 내용은 Vue의 v-for에 대한 간략한 설명, 키 값이 전환 효과와 애니메이션 효과에 영향을 미칩니다(자세한 코드 설명).의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!