亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

vue中組件的過渡動畫及實現(xiàn)代碼

 更新時間：2018年11月21日 11:56:06   作者：先去前面探探路  
這篇文章主要介紹了vue中組件的過渡動畫，并通過實例代碼給大家介紹了過渡動畫的實例代碼，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下

1.  和多個元素的過渡一樣，用組件來替換transition中包裹的標(biāo)簽

<style>
 .fade-enter,
 .fade-leave-to {
  opacity: 0
 }
 .fade-enter-active,
 .fade-leave-active {
  transition: opacity 2s
 }
 </style>
</head>

<body>
 <div id="demo">
 <button @click="show = !show">click me</button>
 <transition name="fade" mode="in-out">
  <child-one v-if="show"></child-one>
  <child-two v-else></child-two>
 </transition>
 </div>
 <script>
 Vue.component('child-one', {
  template: `<div>child-one</div>`
 })
 Vue.component('child-two', {
  template: `<div>child-two</div>`
 })
 new Vue({
  el: '#demo',
  data: {
  show: true
  },
 })
 </script>

2.  動態(tài)組件：component組件 :is 屬性，來實現(xiàn)組件的過渡效果 

<style>
 .fade-enter,
 .fade-leave-to {
  opacity: 0
 }
 .fade-enter-active,
 .fade-leave-active {
  transition: opacity 2s
 }
 </style>
</head>

<body>
 <div id="demo">
 <button @click="handleClick">click me</button>
 <transition name="fade" mode="in-out">
  <component :is="type"></component>
 </transition>
 </div>
 <script>
 Vue.component('child-one', {
  template: `<div>child-one</div>`
 })
 Vue.component('child-two', {
  template: `<div>child-two</div>`
 })
 new Vue({
  el: '#demo',
  data: {
  type: 'child-one'
  },
  methods:{
  handleClick () {
   this.type = this.type === 'child-one' ? 'child-two' : 'child-one'
  }
  }
 })
 </script>

PS：下面看下Vue過渡動畫實現(xiàn)

實現(xiàn)一個點擊切換元素的隱藏和顯示狀態(tài)!

<div id="app">
  <transition>
    <p v-if="show">Hello World</p>
  </transition>
  <button @click="toggle">切換</button>
</div>

需要把加入動畫的元素放在transition組件內(nèi),定義一個按鈕的切換方法

<script>
  var app=new Vue({
    el:"#app",
    data:{
      show:true
    },
    methods:{
      toggle:function(){
        this.show=!this.show;
      }
    }

  })
</script>

給不同狀態(tài)下添加相應(yīng)的樣式

.v-enter,.v-leave-to{
  opacity:0;
}
.v-enter-active,.v-leave-to{
  color:#00BFFF;
  transition: opacity 3s;
}

可以給transition添加一個name,如果name為"fade",則class前綴為指定的name

動畫過程中類名的變化

我們可以自定義類名,在元素屬性中添加進入狀態(tài) enter-active-class,和離開狀態(tài)leave-active-class

總結(jié)

以上所述是小編給大家介紹的vue中組件的過渡動畫及實現(xiàn)代碼，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

相關(guān)文章

最新評論