關於vue動畫與animate.css的使用

1引用animate.css:

<link href="<%= BASE_URL %>static/animate.css" rel="stylesheet" />

2與vue變量 判斷的結合

html代碼： 

<template>
    <div class="report">
        <div class="container">
            <div class="left" @mouseover="isvisible=true">
                <img class="left_img" src="http://oss-cn-beijing.aliyuncs.com/xz-bktt/3be13f7c70e7222aefdebe77dfeb6f19.png" />
                <transition enter-active-class="animated fadeInUp" leave-active-class="animated fadeOutDown">
                    <div class="image_info" v-show="isvisible" @mouseout="isvisible=false"></div>
                </transition>
            </div>
        </div>
    </div>
</template>

enter-active-class是animate動畫出廠動做，leave-active-class是animate動畫離場動做

js代碼：

<script>
export default {
    data() {
        return {
           isvisible: false,
        }
    },
}
</script>