1. 程式人生 > >vue——30-動畫-使用第三方類( Animate )實現動畫

vue——30-動畫-使用第三方類( Animate )實現動畫

引入 animate.css

    <link rel="stylesheet" href="../frame/animate.css">

body

<div id="app">
    <input type="button" value="toggle" @click="flag=!flag">
    <!-- 入場 bounceIn    離場 bounceOut -->

    <!--<transition enter-active-class="animated bounceIn" leave-active-class="animated bounceOut">
        <h3 v-if="flag">這是一個H3</h3>
    </transition>-->
<!-- 使用 :duration="毫秒值" 來統一設定 入場 和 出場 的動畫時長--> <!--<transition enter-active-class="bounceIn" leave-active-class="hinge" :duration="400"> <h3 v-if="flag" class="animated">這是一個H3</h3> </transition>--> <!-- 使用 :duration="{ enter:毫秒值, leave:毫秒值 }" 來分別設定 入場 和 出場 的動畫時長-->
<transition enter-active-class="bounceIn" leave-active-class="hinge" :duration="{ enter:400, leave:200 }"> <h3 v-if="flag" class="animated">這是一個H3</h3> </transition> </div> <script> window.onload = function () { let vm = new Vue({ el:
'#app', data: { flag: false }, methods: {} }); }
</script>