vue2.0和animate.css的結合使用

時間 2020-05-12

標籤 vue2.0 vue animate.css animate css 結合使用欄目 CSS 简体版

原文原文鏈接

animate.css是一款前端動畫庫，類似的有velocity-animate。css

上述是一個完整的結構。其中重要的幾個點用箭頭表示出來。首先在transition組件內部，須要定義兩個基本的class類，表示過渡進來和過渡出去的時候所要配合使用的animate.css的類值。zoomInLeft/zoomOutRight是其中的一對兒。具體的其它效果能夠查看animatecss的官網。其次在transition組件內部的話，須要過渡的子元素須要加上animated類。最後可能也是比較容器忽略的點，這個v-show看似好像是多餘的，可是不加上的話，對於過渡效果是沒用的。由於過渡是從一個從無到有的一個效果。最開始進來的時候若是元素自己是show 的，那麼過渡就失效了。因此在元素上面須要加上這個v-show屬性。在過渡進來的時候，v-show設置爲true，相反爲false。

html

下面看一段實例代碼vue過渡和animate.css結合使用前端

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>動畫</title>
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/animate.css/3.5.2/animate.min.css" rel="external nofollow" />
</head>

<body>
    <div id="box">
        <!-- 控制數據的值切換顯示隱藏 -->
        <button @click="show=!show">transition</button>
        <transition name="" mode="" enter-active-class="zoomInLeft" leave-active-class="zoomOutRight">
            <p v-show="show" class="animated">第一種方法</p>
        </transition>
        <transition name="" mode="" enter-active-class="animated zoomInLeft" leave-active-class="animated zoomOutRight">
            <p v-show="show">第二種方法</p>
        </transition>
        <!-- 多元素運動 -->
        <transition-group tag="" name="" enter-active-class="zoomInLeft" leave-active-class="zoomOutRight">
            <p v-show="show" class="animated" :key="1">第一個元素</p>
            <p v-show="show" class="animated" :key="2">第二個元素</p>
        </transition-group>
    </div>

    <script> window.onload = function(){ var app = new Vue({ el:'#box', data:{ show:false } }) } </script>
</body>
</html>

1. vue過渡和animate.css結合使用
2. vue 結合 animate.css
3. animate.css的使用
4. vue2.0 與 bootstrap datetimepicker的結合使用
5. Vue 使用animate.css
6. 使用animate.css
7. Vue2.0使用小結
8. Animate.css和wow.js的搭配使用
9. css3動畫animate.css的使用
10. animate.css的使用介紹
更多相關文章...
• Redis和數據庫的結合 - Redis教程
• Redis集合數據結構和常用命令 - Redis教程
• 適用於PHP初學者的學習線路和建議
• Composer 安裝與使用

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。