vue實(shí)現(xiàn)循環(huán)切換動(dòng)畫

更新時(shí)間：2018年10月17日 10:34:44 作者：guoxiaxing

這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)循環(huán)切換動(dòng)畫，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了vue實(shí)現(xiàn)循環(huán)切換動(dòng)畫的具體代碼，供大家參考，具體內(nèi)容如下

注意動(dòng)畫的鉤子函數(shù)的判斷邏輯，注意動(dòng)畫編寫時(shí)類名的順序！！

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>vue</title>
 <style> 
 .box{
  width: 200px;
  height: 200px;
  background-color: red;
 }
 .guo-enter-active,.guo-leave-active{
  width: 200px;
  height: 200px;
  opacity: 1;
  background-color: red;
  transition: 0.7s;
 }
 .guo-leave-to{
  width: 100px;
  height: 100px;
  opacity: 0;
  background-color: orange;
 }
 .guo-enter{
  width: 100px;
  height: 100px;
  opacity: 0;
  background-color: orange;
 }
 .box2{
  margin-top: 100px;
 }
 </style>
 <script src='vue.min.js'></script>
</head>
<body>
 <div id='app'>
 <div>
  <input type="button" value='change' @click='change'>
  <transition name='guo' @after-enter='Enter' @after-leave='Leave'>
  <div v-show='show' class='box'></div>
  </transition>
  <transition name='guo' @enter='Enter2' @after-leave='Leave2'>
  <div v-show='show2' class='box box2'></div>
  </transition>
 </div>
 </div>
 <script>
 new Vue({
  el:'#app',
  data:{
  show:false,
  show2:false
  },
  methods:{
  change(){
   this.show = !this.show;
  },
  Enter(){
   this.show2 = true;
  },
  Leave(){
   this.show2=false;
  },
  Leave2(){
   this.show = true;
  },
  Enter2(){
   this.show = false;
  }
  }
 });
 </script>
</body>
</html>

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

您可能感興趣的文章:

相關(guān)文章

Vue實(shí)現(xiàn)拖拽穿梭框功能四種方式實(shí)例詳解
這篇文章主要介紹了Vue實(shí)現(xiàn)拖拽穿梭框功能四種方式,使用原生js實(shí)現(xiàn)拖拽，VUe使用js實(shí)現(xiàn)拖拽穿梭框，結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2022-09-09
element-ui?el-table表格固定表頭代碼示例
Element-UI的el-table組件是一個(gè)非常強(qiáng)大的表格組件,它提供了多種常見的表格功能,如排序、篩選、分頁、自定義列模板等,這篇文章主要給大家介紹了關(guān)于element-ui?el-table表格固定表頭的相關(guān)資料,需要的朋友可以參考下
2024-05-05
Vue基于localStorage存儲(chǔ)信息代碼實(shí)例
這篇文章主要介紹了Vue基于localStorage存儲(chǔ)信息代碼實(shí)例,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2020-11-11
關(guān)于Vue中的計(jì)算屬性和監(jiān)聽屬性詳解
這篇文章主要介紹了關(guān)于Vue中的計(jì)算屬性和監(jiān)聽屬性詳解,Vue.js模板內(nèi)的表達(dá)式非常便利，但是設(shè)計(jì)它們的初衷是用于簡(jiǎn)單運(yùn)算的，在模板內(nèi)放入過長(zhǎng)的或復(fù)雜的邏輯時(shí)，會(huì)讓模板過重且難以維護(hù),需要的朋友可以參考下
2023-05-05
Vue項(xiàng)目中對(duì)index.html中BASE_URL的配置方式
這篇文章主要介紹了Vue項(xiàng)目中對(duì)index.html中BASE_URL的配置方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-06-06
vue使用Vue.extend創(chuàng)建全局toast組件實(shí)例
這篇文章主要介紹了vue使用Vue.extend創(chuàng)建全局toast組件實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-03-03
vue項(xiàng)目使用uniapp生成app的全過程
這篇文章主要介紹了vue項(xiàng)目使用uniapp生成app的全過程,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2023-10-10
vue之使用vuex進(jìn)行狀態(tài)管理詳解
這篇文章主要介紹了vue之使用vuex進(jìn)行狀態(tài)管理詳解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-04-04
實(shí)現(xiàn)一個(gè)VUE響應(yīng)式屬性裝飾器詳析
這篇文章主要介紹了實(shí)現(xiàn)一個(gè)VUE響應(yīng)式屬性裝飾器詳析，文章通過圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的小伙伴可以參考一下
2022-09-09
Vue中的文字換行問題
這篇文章主要介紹了Vue中的文字換行問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-09-09