2. 程式人生 > >vue2.0和animate.css的結合使用

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

阿新 • • 發佈：2019-01-09

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

首先是transition元件
用法：
1、要用animate.css，那麼首先需要做的就是匯入它。區域性的匯入的話，就在當前的.vue檔案中的style標籤中匯入：

@import "animate".css;

注意，匯入css檔案的時候。在末尾應該要加上分號。如果不加的話，會影響後面寫的區域性樣式。

2、開始使用animate.css
這裡寫圖片描述

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

還有一個點是在上述程式碼中沒有展現出來的，如果有多個子元素都要實現過渡，可以加上

<transition-group></transition-group>

進行包裹。

下面看一段例項程式碼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>

這裡寫圖片描述

相關推薦

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

animate.css是一款前端動畫庫，相似的有velocity-animate。 首先是transition元件 用法： 1、要用animate.css，那麼首先需要做的就是匯入它。區域性的匯入的話，就在當前的.vue檔案中的style標籤中匯入： @import "anima

webpack中使用wowjs和animate.css

animate.css 是一個來自國外的 CSS3 動畫庫，它預設了抖動（shake）、閃爍（flash）、彈跳（bounce）、翻轉（flip）、旋轉（rotateIn/rotateOut）、淡入淡出（fadeIn/fadeOut）等多達 60 多種動畫效果，幾乎包含了所有常見的動畫效果。

css3自定義動畫和animate.css 動畫

1、首先引入animate css檔案 <link rel="stylesheet" href="animate.min.css"> 2、給指定的元素加上指定的動畫樣式名 <div class="animated bounceOutLeft"></div

vue2.0和vue1.0路由對比以及腳手架初始路由分析

2.0新版本路由相比1.0在使用上做了一些改動，但核心思想並未改變，接下來稍作分析和對比，使用路由之前都需要引入vue-router.js檔案 一、兩個路由版本的初步分析 1.0 .js /*1.建立根元件 必須得要有一個根元件*/

Vue2.0設定全域性樣式(less/sass和css)

為Vue設定全域性樣式需要幾個步驟(如果是sass將less改成sass即可) 第一：在src目錄下的main.js,也就是入口檔案裡面新增下面程式碼 require('!style-loader!css-loader!less-loader!./commo

vue2.0結合Element實現select動態控制input禁用

嘻嘻 [0 attr 折騰 解決 model utf del logs 今天有一個盆友問小穎，怎麽實現用select動態控制input禁用，也就是說，input默認是可編輯的，但是每當我選一次select，input就會變成禁用，雖然小穎不知道她為什麽這樣做，因為小

Vue2.0 探索之路——生命周期和鉤子函數的一些理解（轉）

head chrom 路由 技術分享 defined 修改 疑問 reat 有時 前言 在使用vue一個多禮拜後，感覺現在還停留在初級階段，雖然知道怎麽和後端做數據交互，但是對於mounted這個掛載還不是很清楚的。放大之，對vue的生命周期不甚了解。只知道簡單的使用，而不

如何在vue2.0項目中引用element-ui和echart.js

theme efault all -s post index 大牛 麻煩 原因 1 項目中怎樣添加elment-ui 和 echart.js 　　1.1直接在packjson 裏面的 dependencies 配置 　　"element-ui": "^1.3.3", 　

vue2+animate.css

nim port import leave 下載 使用 show right click 下載animate.css並引入項目, import ‘./css/animate.css‘使用： <template> 　　<div class="box">

vue2.0中的watch和計算屬性computed

str rect register rst 定向 one 特點 created doc watch和computed均可以監控程序員想要監控的對象，當這些對象發生改變之後，可以觸發回調函數做一些邏輯處理 watch監控自身屬性變化 <!DOCTYPE html&

談談vue2.0的dependencies和devDependencies

dep 單元測試 install 安裝插件 程序 使用 pen 正常 運行 使用npm install modlue --save 或者npm install modlue --save-dev ,使用--save-dev安裝插件，會被寫入devDependencies

Lucene.net(4.8.0) 學習問題記錄五: JIEba分詞和Lucene的結合，以及對分詞器的思考

+= d+ ext eth reac chart rdl ret start 前言：目前自己在做使用Lucene.net和PanGu分詞實現全文檢索的工作，不過自己是把別人做好的項目進行遷移。因為項目整體要遷移到ASP.NET Core 2.0版本,而Lucene使用的版本

Vue2.0筆記——屬性綁定和Class與Style綁定

Vue屬性綁定 通過指令v-bind可以綁定屬性,該指令同v-on一樣，也有一個簡寫，“：”冒號。綁定元素的屬性，並且可與元素的原屬性共存。當原屬性有值時則顯示原屬性的值，無值則使用綁定的值。 <div id="app"> <img :src="url" :width="width"

vue2.0學習(四)-實例和內置組件

red jsp methods emit 屬性 function AS button 組件 vue2.0學習(四)-實例和內置組件 1.實例入門-實例屬性 一、Vue和Jquery.js一起使用 下載可以去官網進行下載，我這裏使用的版本是3.1.1，下載好後在需要的頁面引入

Vue2.0筆記——計算屬性和偵聽器

Vue計算屬性 在模板使用表達式會非常便利，但是僅適用於簡單的運算。當放入太多的邏輯，使得模板過於難以維護。對於這樣，就像一個數據需要根據另一個數據的變動而變動。也因此計算屬性有了可以監視的能力。<br/>所以，對於任何復雜邏輯，你都應當使用計算屬性。 計算屬性也是用來存儲數據，但具有以下幾個特點

Vue2.0 探索之路——生命周期和鉤子函數的一些理解

ram F12 一些事 key 版本 net 就是 pre 簡單 前言 在使用vue一個多禮拜後，感覺現在還停留在初級階段，雖然知道怎麽和後端做數據交互，但是對於mounted這個掛載還不是很清楚的。放大之，對vue的生命周期不甚了解。只知道簡單的使用，而不知道為什麽，這對

vue2.0中的：is和is的區別

此文首發於 lijing0906.github.io/ 最近，工作之餘在翻閱vue.js的官方文件，在檢視到動態元件和解析 DOM 模板時的注意事項的時候，講到一個特殊的is特性，覺得很有意思，就來寫一篇自己理解的總結。 現場 寫栗子實踐 其實看過之後，其實是有點懵的，

vue2.0 結合better-scroll 實現下拉加載

before settime finish log 計算 結合 底部 page png 一、建議先了解下better-scroll 的介紹 鏈接：https://ustbhuangyi.github.io/better-scroll/doc/zh-hans/#better-

vue2.0 結合better-scroll 實現下拉載入

一、建議先了解下better-scroll 的介紹 連結：https://ustbhuangyi.github.io/better-scroll/doc/zh-hans/#better-scroll%20%E6%98%AF%E4%BB%80%E4%B9%88 二、npm 安裝 npm install b

vue2.0項目記住密碼和用戶名實例

adding 記住密碼 etl cookie 代碼 自動 rul ons model 的今天突來興致，試了一下將用戶名和密碼存在cookie和localStorage裏如何實現；從代碼難易程度來講，果斷選擇了將用戶名和密碼存在localStorage裏面。當然菜鳥上這麽說的