溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
<!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>
之前是對單個或多個元素之間做切換動畫效果，現在，對一個列表過渡效果，用標簽<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">
????????/*因為沒有給它命名，所以用默認v開頭的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>為啥上面的效果是增加的都有漸顯效果呢？
用一對<transition-group>標簽包裹
<transition-group>
????<div>hello</div>
????<div>hello</div>
????<div>hello</div>
</transition-group>
相當于每一個都用一對<transition>標簽包裹
<transition>
????<div>hello</div>
</transition>
<transition>
????<div>hello</div>
</transition>
<transition>
????<div>hello</div>
</transition>
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
