快捷導(dǎo)航

詳解vue2.0 transition 多個(gè)元素嵌套使用過(guò)渡

更新時(shí)間：2017年06月19日 17:13:25 作者：xqnode

這篇文章主要介紹了詳解vue2.0 transition 多個(gè)元素嵌套使用過(guò)渡，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

在做vue的demo的時(shí)候遇到一個(gè)問(wèn)題，多個(gè)嵌套的元素如何設(shè)置transition？

我的代碼：

<div id='demo'>
    <button @click="show = !show">按鈕</button>
    <transition name='move'>
      <div class="v-d" v-show="show">
        <div class='in in_move'></div>
      </div>
    </transition>
  </div>

//css
.v-d{
      width:50px;
      height:50px;
      padding:10px;
      transition: all 0.4s linear
    }
    .v-d .in{
      width:30px;
      height:30px;
      background:#000;
      transition: all 0.4s linear
    }
    .move-enter-active, .move-leave-active{
      transition: all 0.4s linear
    } 
    .move-enter, .move-leave-active{
      opacity: 0;
      transform: translateX(30px);
    } 
    .move-enter, .move-leave-active .in{
      transform: rotate(45deg)
    }

//js
window.onload = function(){
    new Vue({
     el: '#demo',
     data: {
      show: false
     }
    })
  }

運(yùn)行代碼后發(fā)現(xiàn)這個(gè)類名的過(guò)渡:

.move-enter, .move-leave-active .in{
  transform: rotate(180deg)
}

沒(méi)起作用，我開(kāi)始以為這種嵌套的寫法不支持，但是后來(lái)經(jīng)過(guò)多次嘗試后發(fā)現(xiàn)，原來(lái)transition 應(yīng)用的類名不能和基本樣的類名一樣，也就是.in這個(gè)類必須換名才能起作用，所以在改動(dòng)下面代碼：

<transition name='move'>
 <div class="v-d">
  <div class='in in_move'></div>
 </div>
</transition>

.move-enter, .move-leave-active .in_move{
  transform: rotate(180deg)
}

改完運(yùn)行就ok了，實(shí)現(xiàn)了元素旋轉(zhuǎn)和位移。

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

您可能感興趣的文章:

相關(guān)文章

淺聊一下Vue2中的functional組件
最近聽(tīng)到有人提到了Vue2的functional組件,大致上是說(shuō)這個(gè)東西沒(méi)有生命周期,在渲染層面上,會(huì)減少很多的消耗,一番處理之后,首屏?xí)r間和內(nèi)存都能減少不少,所以本文小編就來(lái)和大家聊聊Vue2中的functional組件<BR>
2023-08-08
Vue中子組件的顯示與隱藏方式
這篇文章主要介紹了Vue中子組件的顯示與隱藏方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-09-09
vue實(shí)現(xiàn)簡(jiǎn)單購(gòu)物車案例
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)簡(jiǎn)單購(gòu)物車案例，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-06-06
Vue-Cli如何在index.html中進(jìn)行環(huán)境判斷
這篇文章主要介紹了Vue-Cli如何在index.html中進(jìn)行環(huán)境判斷問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-03-03
vue 2.x 中axios 封裝的get 和post方法
本文通過(guò)實(shí)例代碼給大家介紹了vue 2.x 中axios 封裝的get 和post方法，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下吧
2018-02-02
vue+element-ui JYAdmin后臺(tái)管理系統(tǒng)模板解析
這篇文章主要介紹了vue+element-ui JYAdmin后臺(tái)管理系統(tǒng)模板解析，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2020-07-07
探究Vue.js 2.0新增的虛擬DOM
vue.js 2.0大家對(duì)此并不陌生吧。最令人興奮的是更新頁(yè)面的"虛擬DOM"的加入。那么對(duì)于虛擬 DOM 可以做什么呢？今天小編通過(guò)本文給大家解答下
2016-10-10
Vuex?localStorage的具體使用
本文主要介紹了Vuex?localStorage的具體使用，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2023-05-05
element-ui配合node實(shí)現(xiàn)自定義上傳文件方式
這篇文章主要介紹了element-ui配合node實(shí)現(xiàn)自定義上傳文件方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-09-09
vue input標(biāo)簽通用指令校驗(yàn)的實(shí)現(xiàn)
這篇文章主要介紹了vue input標(biāo)簽通用指令校驗(yàn)的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-11-11