溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

Vue中的列表過(guò)渡

發(fā)布時(shí)間：2020-07-25 06:24:21 來(lái)源：網(wǎng)絡(luò) 閱讀：225 作者：梁十八 欄目：web開(kāi)發(fā) 
<!DOCTYPE?html>
<html>
<head>
????<title></title>
????<meta?http-equiv="Content-Type"?content="text/html;?charset=utf-8"?/>
????<link?rel="stylesheet"?type="text/css"?href="./animate.css">
????<script?src="./vue.js"></script>
????<!--?<script?src="http://cdn.staticfile.org/vue/2.6.10/vue.common.dev.js"></script>?-->
????
</head>
<body>
????<div?id="root">
????????//性能考慮，盡量不用index作為key值?<br>
????????<div?v-for="(item)?of?list"?:key="item.id">
????????????{{item.title}}
????????</div>
????????<button?@click="handBtnClick">add</button>
????</div>
????<script?type="text/javascript">
????????var?count?=?0;
????????var?vm?=?new?Vue({
????????????el:?"#root",
????????????data:?{
????????????????list:?[]
????????????},
????????????methods:?{
????????????????handBtnClick:?function()?{
????????????????????this.list.push({
????????????????????????id:?count++,
????????????????????????title:?"hello"
????????????????????});
????????????????}
????????????}
????????});
????</script>
</body>
</html>

之前是對(duì)單個(gè)或多個(gè)元素之間做切換動(dòng)畫效果，現(xiàn)在，對(duì)一個(gè)列表過(guò)渡效果，用標(biāo)簽<transition-group>：

<!DOCTYPE?html>
<html>
<head>
????<title></title>
????<meta?http-equiv="Content-Type"?content="text/html;?charset=utf-8"?/>
????<link?rel="stylesheet"?type="text/css"?href="./animate.css">
????<script?src="./vue.js"></script>
????<!--?<script?src="http://cdn.staticfile.org/vue/2.6.10/vue.common.dev.js"></script>?-->
????<style?type="text/css">
????????/*因?yàn)闆](méi)有給它命名，所以用默認(rèn)v開(kāi)頭的class名*/
????????.v-enter,?.v-leave-to?{
????????????opacity:?0;
????????}
????????.v-enter-active,?.v-leave-active?{
????????????transition:?opacity?1s;
????????}
????</style>
</head>
<body>
????<div?id="root">
????????//性能考慮，盡量不用index作為key值?<br>
????????<transition-group>
????????????<div?v-for="(item)?of?list"?:key="item.id">
????????????????{{item.title}}
????????????</div>
????????</transition-group>
????????<button?@click="handBtnClick">add</button>
????</div>
????<script?type="text/javascript">
????????var?count?=?0;
????????var?vm?=?new?Vue({
????????????el:?"#root",
????????????data:?{
????????????????list:?[]
????????????},
????????????methods:?{
????????????????handBtnClick:?function()?{
????????????????????this.list.push({
????????????????????????id:?count++,
????????????????????????title:?"hello"
????????????????????});
????????????????}
????????????}
????????});
????</script>
</body>
</html>

為啥上面的效果是增加的都有漸顯效果呢？

用一對(duì)<transition-group>標(biāo)簽包裹

<transition-group>
????<div>hello</div>

????<div>hello</div>

????<div>hello</div>

</transition-group>

相當(dāng)于每一個(gè)都用一對(duì)<transition>標(biāo)簽包裹

<transition>

????<div>hello</div>

</transition>

<transition>

????<div>hello</div>

</transition>

<transition>

????<div>hello</div>

</transition>

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手