今天想要針對資料的呈現做一個簡單的小動畫，搭配上次做的loading bar，
做一個不會太過誇張，但又不會太過無聊的效果。程式碼在此

動畫是參考官網

套用material md-card

1. 套用md-card
2. 外層包transition-group(給一個name，等等動畫要用)
3. 針對資料用v-for在畫面上顯示資料
4. v-bind:key很重要，因為transition-group要求要有key來識別唯一性

<transition-group name="list">
            <md-card md-with-hover v-for="(item, index) in users" v-bind:index="index" v-bind:key="item.id">
                <div>
                    <md-ripple>
                        <md-card-header>
                         ...
                        </md-card-header>

                        <md-card-content>
                         ...
                        </md-card-content>

                        <md-card-actions v-show="!isProgress()">
                            <md-button class="md-primary md-icon-button">
                                <md-icon>edit</md-icon>
                            </md-button>
                        </md-card-actions>
                    </md-ripple>
                </div>
            </md-card>
        </transition-group>

設定css

vue transition的特性
<transition-group name="list"> 當中的name="list"
當作css的prefix，並且進行css的設定。

.list-enter-active,
.list-leave-active {
  transition: all 1s;
}

.list-enter,
.list-leave-to {
  opacity: 0;
  transform: translateY(50px);
}

查看效果

先前有介紹過axios、vuex、loading bar，在搭配json-server -delay=2000
可以明顯看出效果，在搭配這次實作的動畫效果，感覺算是還不錯。