快捷導(dǎo)航

vue過(guò)渡和animate.css結(jié)合使用詳解

更新時(shí)間：2017年06月14日 15:43:55 作者：22337383

本篇文章主要介紹了vue過(guò)渡和animate.css結(jié)合使用詳解，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

今天學(xué)習(xí)了vue過(guò)渡和animate.css結(jié)合使用，所以，添加一點(diǎn)小筆記。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>動(dòng)畫(huà)</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> -->

    <!-- 多元素運(yùn)動(dòng) -->
    <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>

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

vue3使用video.js播放m3u8格式視頻的操作指南
有時(shí)候我們需要播放 m3u8 格式的視頻,或者實(shí)現(xiàn)視頻播放器更多定制化需求,HTML 的 video 元素?zé)o法實(shí)現(xiàn)這些需求,這時(shí)候可以考慮使用 Video.js,本文給大家介紹了vue3使用video.js播放m3u8格式視頻的操作指南,需要的朋友可以參考下
2024-07-07
前端vue實(shí)現(xiàn)甘特圖功能
dhtmlxGantt是一個(gè)強(qiáng)大的JavaScript Gantt圖表庫(kù),提供易于使用、高度可自定義的Gantt圖表組件,它支持多項(xiàng)任務(wù)和進(jìn)度條,以及多種列和行布局,可用于創(chuàng)建各種類型的時(shí)間線和計(jì)劃表,本文給大家介紹前端vue實(shí)現(xiàn)甘特圖的相關(guān)知識(shí),感興趣的朋友跟隨小編一起看看吧
2024-04-04
vue實(shí)現(xiàn)輸入一位數(shù)字轉(zhuǎn)漢字功能
這篇文章主要介紹了vue實(shí)現(xiàn)輸入一位數(shù)字轉(zhuǎn)漢字功能，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2019-12-12
element中TimePicker時(shí)間選擇器禁用部分時(shí)間(顯示禁用到分鐘)
這篇文章主要介紹了element中TimePicker時(shí)間選擇器禁用部分時(shí)間(顯示禁用到分鐘)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2021-03-03
Vue3處理錯(cuò)誤邊界(error boundaries)的示例代碼
在開(kāi)發(fā) Vue 3 應(yīng)用時(shí),處理錯(cuò)誤邊界（Error Boundaries）是一個(gè)重要的考量,在 Vue 3 中實(shí)現(xiàn)錯(cuò)誤邊界的方式與 React 等其他框架有所不同,下面,我們將深入探討 Vue 3 中如何實(shí)現(xiàn)錯(cuò)誤邊界,并提供一些示例代碼幫助理解什么是錯(cuò)誤邊界,需要的朋友可以參考下
2024-10-10
vue項(xiàng)目之index.html如何引入JS文件
這篇文章主要介紹了vue項(xiàng)目之index.html如何引入JS文件問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-12-12
在Vue3中實(shí)現(xiàn)拖拽文件上傳功能的過(guò)程詳解
文件上傳是我們?cè)陂_(kāi)發(fā)Web應(yīng)用時(shí)經(jīng)常遇到的功能之一,為了提升用戶體驗(yàn),我們可以利用HTML5的拖放API來(lái)實(shí)現(xiàn)拖拽文件上傳的功能,本文將介紹如何在Vue3中實(shí)現(xiàn)這一功能,文中有詳細(xì)的代碼示例供大家參考,需要的朋友可以參考下
2023-12-12
在vue中阻止瀏覽器后退的實(shí)例
今天小編就為大家分享一篇在vue中阻止瀏覽器后退的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2019-11-11
vue組件中修改組件外元素樣式的兩種解決方案
這篇文章主要介紹了vue組件中修改組件外元素樣式,本文給大家分享兩種解決方案幫助大家解決這樣的問(wèn)題，結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下
2023-05-05
vue中v-cloak的作用和原理解析
v-cloak原理是先通過(guò)樣式隱藏內(nèi)容,然后在內(nèi)存中進(jìn)行值的替換,將替換的內(nèi)容再反饋給界面,數(shù)據(jù)渲染完場(chǎng)之后,v-cloak 屬性會(huì)被自動(dòng)去除,本文詳細(xì)介紹vue中v-cloak的作用和原理解析,感興趣的朋友一起看看吧
2023-09-09