vue2.0 和 animate.css的結合使用
這里說的是vue2.0和animate.css的結合使用。其實用過就知道用法是比較簡單的。但是就是剛開始使用的時候，難免有的會遇到各種問題。簡單的說說我所用過并且遇過的坑。
首先是transition組件，在2.0中由transition屬性變成了一個獨立的組件。
用法：
1、
要用animate.css，那么首先需要做的就是導入它。局部的導入的話，就在當前的.vue文件中的style標簽中導入：@import "animate.css"; 注意，導入css文件的時候。在末尾應該是要加上分號的。如果不加的話，會影響后面寫的局部樣式
2、
開始使用animate.css
上述是一個完整的結構。其中重要的幾個點用箭頭表示出來。首先在transition組件內部，需要定義兩個基本的class類，表示過渡進來和過渡出去的時候所要配合使用的animate.css的類值。zoomInLeft/zoomOutRight是其中的一對兒。具體的其他效果可以查看animate.css的官網(wǎng)。其次在transition組件內部的話，需要過渡的子元素需要加上animated類。最后可能也是比較容易忽略的點（至少我就是）。這個v-show,看似好像是多余的，但是不加上的話，對于過渡效果是沒有用的。因為過渡 是從一個無到有或者有到無的一個效果。最開始進來的時候如果元素本身就是show的，那么過渡就失效了。所以在元素上面需要加上這個v-show屬性。在過渡效果進來的時候，v-show設置為true，相反為false。
還有一點是在上述代碼中沒有展現(xiàn)出來的，如果有多個子元素都要實現(xiàn)過渡，可以加上<transition-group></transition-group>進行包裹。
PS：下面看一段實例代碼vue過渡和animate.css結合使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>動畫</title>
<script type="text/javascript" src="vue.js"></script>
<link rel="stylesheet" type="text/css" href="animate.css" rel="external nofollow" >
<style type="text/css">
p {
width: 300px;
height: 300px;
background: red;
margin: 10px auto;
}
</style>
<script type="text/javascript">
window.onload = function(){
var app = new Vue({
el:'#box',
data:{
show:false
}
})
}
</script>
</head>
<body>
<div id="box">
<!-- 控制數(shù)據(jù)的值切換顯示隱藏 -->
<button @click="show=!show">transition</button>
<!-- <transition enter-active-class="zoomInLeft" leave-active-class="zoomOutRight">
<p v-show="show" class="animated"></p>
</transition> -->
<!-- 第二種方法 -->
<!-- <transition enter-active-class="animated zoomInLeft" leave-active-class="animated zoomOutRight">
<p v-show="show"></p>
</transition> -->
<!-- 多元素運動 -->
<transition-group 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>
</body>
</html>
總結
以上所述是小編給大家介紹的vue2.0 和 animate.css的結合使用，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關文章
在本文里我們給大家整理了關于vue2.0中set添加屬性后視圖不能更新的解決辦法以及相關知識點，需要的朋友們學習下。2019-02-02
給大家分享了關于Vue.js想成為高手的5個總要知識點，需要的朋友可以學習下。2018-04-04
這篇文章說明了如何使用Vue去刷新當前頁面的多種方法實例,有完成的代碼提供參考,希望對你有所幫助2021-06-06
這篇文章主要介紹了vue 自定義icon的圖標的步驟，文中大概給大家分為兩步驟，通過實例圖文相結合給大家介紹的非常詳細,需要的朋友可以參考下2021-08-08
這篇文章主要介紹了用Cordova打包Vue項目的方法步驟，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-02-02
在Vue2項目中,使用dart-sass替代node-sass可以解決安裝困難和環(huán)境兼容問題,VueCLI3+用戶可直接使用,而VueCLI2用戶需升級VueCLI和項目,具體方法包括修改package.json依賴并使用.scss文件編寫樣式,此更改有助于提升項目的開發(fā)效率和跨平臺兼容性2024-09-09
這篇文章主要介紹了關于表單組件el-form中的prop的作用，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-05-05
在Vue中，方法體里用this調用vue實例的數(shù)據(jù)，有時會指向window，導致調用失敗報錯，這篇文章主要介紹了Vue中關于this指向的問題 ,需要的朋友可以參考下2022-07-07
這篇文章主要介紹了解決VuePress頁面亂碼問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要為大家詳細介紹了vue組件學習教程，根據(jù)Vue官方文檔學習的筆記，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-09-09