vue動畫 <transition-group> 使用半場動畫
阿新 • • 發佈：2021-01-03
<style> /* 給動畫新增一組過度效果 */ .v-enter, .v-leave-to { opacity: 0.8; /* 從右向左進入 */ transform: translateX(80px); /* 從下向上進入 */ transform: translateY(80px); } .v-enter-active, .v-leave-active { transition: all 0.6s ease; } </style> </head> <body> <div id="app"> <div> <label> Id:<input type="text" v-model="id"> </label> <label> Name:<input type="text" v-model="name"> </label> <label> 新增:<input type="button" @click="add" value="新增"> </label> </div> <!-- 在實現列表過度的時候 如果需要過度的元素是通過v-for迴圈渲染出來的 不能 使用transition包裹 需要使用transitionGroup --> <!-- 如果要為v-for迴圈建立的元素設定動畫 必須為每一個元素設定 :key屬性 --> <ul> <transition-group> <li v-for="item in list" :key="item.id"> {{item.id}}---我是動畫--->{{item.name}} </li> </transition-group> </ul> </div> <script> var vm = new Vue({ el: "#app", data: { id: "", name: "", list: [{ id: 1, name: "趙高1" }, { id: 2, name: "趙高2" }, { id: 3, name: "趙高3" }, { id: 4, name: "趙高4 " }, ] }, methods: { add() { this.list.push({ id: this.id, name: this.name }) this.name = this.id = ""; }, }, }) </script>