<template>
    <div class="my-class">
        <div class="title">
            我的班級
        </div>
        <div class="all-class" v-if="!HasNoClass">
            <el-row :gutter="17">
                <transition-group appear tag="el-col" @beforeEnter="beforeEnter" v-on:enter="enter">
 

                    <el-col :span="6" v-for="item in classes" :key="item.id" v-bind:data-index="item">
                        <div class="class" @click="toClass(item.id,item.name)" v-add>
                            <div class="cover-box">
                                <img 
 
:src="item.cover" alt="作品封面" width="100%">
                                <p class="class-title">{{item.name}}</p>
                            </div>
                            <div class="info-box">
                                <p><span>授課老師:</span> &nbsp;
 
{{item.teachers[0].nickname}}</p>
                                <p><span>上課進度:</span> &nbsp;{{item.finish_lesson_count}}/{{item.lesson_count}}</p>
                                <el-progress
                                    :text-inside="true"
                                    :stroke-width="5"
                                    :percentage="item.finish_lesson_count / item.lesson_count * 100"
                                    :show-text='false'></el-progress>
                            </div>
                        </div>
                    </el-col>
                </transition-group>
            </el-row>
        </div>

    </div>
</template>

<script>
    let ind = 0
    import axios from "axios";
    export default {
        data() {
            return {
                ...
            }
        },
        created(){
            ind = 0
        },
        methods: {
            beforeEnter (el) {
                console.log('beforeEnter => ')
                //el.style.opacity = 0
                el.style.paddingTop = '100px'
            },
            // 知乎Vue列表動畫 https://zhuanlan.zhihu.com/p/219783692
            enter (el, done) {
                console.log('enter => ',el.dataset.index)
                let delay = ind * 100
                ind +=1
                setTimeout(()=>{
                    //el.style.opacity = 1
                   // el.style.transition = 'opacity 1s '
                    el.style.animation = 'one-in 0.5s'
                    // el.style.animation = 'one-in 4s infinite'
                    //el.style['animation-iteration-count'] = 1
                    el.style.paddingTop = '0px'
                    done()
                }, delay)
            }
        },
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
    @keyframes one-in{
        from {
            padding-top: 100px;
        }
        to {
            padding-top: 0%;
        }
    }
</style>
<style scoped>
</style>