[Day 20]

說明:
想試試看取回使用者資料和新增使用者的時候，列表的新增是有動畫的，
找到可以透過transition-group來完成(給列表使用,如單一元件可用transition)

一、將list包裝transition-group

    <ul>
      <transition-group name="fade">
        <li v-for="(user, index) in userList" :key="index" v-show="show">
          使用者名稱: {{user.name}}, 年齡: {{user.age}}
          <button @click="deleteUser(user.id, index)" :disabled = userDeleteButton>
    刪除此使用者</button>
        </li>
      </transition-group>
    </ul>

將需要動畫包裝的dom元件加上transistion group ， 並且設定動畫效果為fade。
同時透過v-show的props來控制顯示與否。

二、css

<style>
  .fade-enter-active, 
  .fade-leave-active {
    transition: opacity .8s;
  }

  .fade-enter, 
  .fade-leave-to {
    opacity: 0;
  }
</style>

設定fade時的動畫效果

三、javascript取回資料時

retrieveData(){
      var url = baseUrl + '/user'
      request.get(url, (err, res, body) => {
        let json = JSON.parse(body)
        json.forEach(user => {
          this.userList.push(user)
        })
        this.show = true
      })
    },

this.show = true
讓list顯示。

參考資料:http://blog.tonycube.com/2017/06/vuejs-14-transition-animation.html

[Day20結束]