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

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

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

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

<!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>

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

您可能感興趣的文章:

相關(guān)文章

詳解如何使用Vue實現(xiàn)圖像識別和人臉對比
隨著人工智能的發(fā)展，圖像識別和人臉識別技術(shù)已經(jīng)被廣泛應(yīng)用于各種應(yīng)用程序中，Vue為我們提供了許多實用工具和庫，可以幫助我們在應(yīng)用程序中進(jìn)行圖像識別和人臉識別，在本文中，我們將介紹如何使用Vue進(jìn)行圖像識別和人臉對比,需要的朋友可以參考下
2023-06-06
Element-UI實現(xiàn)復(fù)雜table表格結(jié)構(gòu)的操作代碼
Element-UI組件el-table用于展示多條結(jié)構(gòu)類似的數(shù)據(jù),可對數(shù)據(jù)進(jìn)行排序、篩選、對比或其他自定義操作,本文給大家介紹Element-UI實現(xiàn)復(fù)雜table表格結(jié)構(gòu)的操作代碼,感興趣的朋友一起看看吧
2023-12-12
vue實現(xiàn)氣泡運動撞擊效果
這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)氣泡運動撞擊效，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-08-08
詳解Vue-router嵌套路由
這篇文章主要為大家介紹了Vue-router的嵌套路由，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助
2021-11-11
vue-router路由懶加載及實現(xiàn)方式
這篇文章主要介紹了vue-router路由懶加載及實現(xiàn)方式,路由懶加載的主要作用是將路由對應(yīng)的組件打包成一個個的js代碼塊，只有在這個路由被訪問到的時候，才會加載對應(yīng)組件的代碼塊，需要的朋友可以參考下
2022-12-12
Vue3 (五)集成HTTP庫axios詳情
這篇文章主要講解Vue3 集成HTTP庫axios的相關(guān)內(nèi)容，本文講圍繞如何利用Vue3 集成HTTP庫axios的相關(guān)資料展開文章,需要的朋友可以參考一下，希望對你有所幫助
2021-10-10
Vue組件內(nèi)部實現(xiàn)一個雙向數(shù)據(jù)綁定的實例代碼
這篇文章主要介紹了Vue組件內(nèi)部實現(xiàn)一個雙向數(shù)據(jù)綁定的實例代碼,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下
2019-04-04
vue項目中使用qrcodesjs2生成二維碼簡單示例
最近項目中需生成二維碼,發(fā)現(xiàn)了很好用的插件qrcodesjs2,所以下面這篇文章主要給大家介紹了關(guān)于vue項目中使用qrcodesjs2生成二維碼的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2023-05-05
Vue實現(xiàn)父子組件頁面刷新的幾種常用方法
很多時候我們在操作過頁面時候，特別是增刪改操作之后，數(shù)據(jù)會有所改變，本文主要介紹了Vue實現(xiàn)父子組件頁面刷新的幾種常用方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-04-04
vue中使用百度腦圖kityminder-core二次開發(fā)的實現(xiàn)
這篇文章主要介紹了vue中使用百度腦圖kityminder-core二次開發(fā)的實現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-09-09