快捷導(dǎo)航

一文搞懂Vue里的過渡和動(dòng)畫

更新時(shí)間：2023年06月18日 16:43:24 作者：前端碎碎念

在Vue中，過渡和動(dòng)畫是一種用于在組件之間添加平滑過渡效果和動(dòng)畫效果的高級(jí)用法，Vue提供了一些內(nèi)置的過渡和動(dòng)畫功能，同時(shí)也支持自定義過渡和動(dòng)畫效果，本文就給大家介紹一些Vue中過渡和動(dòng)畫的高級(jí)用法,需要的朋友可以參考下

過渡的 CSS 類名

Vue的過渡功能是通過添加CSS類名來實(shí)現(xiàn)過渡效果。在過渡過程中，Vue會(huì)根據(jù)不同的階段給元素添加不同的CSS類名，如v-enter、v-enter-active、v-leave、v-leave-active等。適用于需要在組件之間添加平滑過渡效果的場(chǎng)景，如淡入淡出、滑動(dòng)等。

<template>
  <transition name="fade">
    <p v-if="show">This is a fading element.</p>
  </transition>
  <button @click="toggleShow">Toggle Show</button>
</template>
<style>
    .fade-enter-active,
    .fade-leave-active {
      transition: opacity 0.5s;
    }
    .fade-enter,
    .fade-leave-to {
      opacity: 0;
    }
</style>
<script>
export default {
  data() {
    return {
      show: false
    };
  },
  methods: {
    toggleShow() {
      this.show = !this.show;
    }
  }
};
</script>

條件過渡的 CSS 類名

Vue還支持根據(jù)條件動(dòng)態(tài)添加過渡的CSS類名。可以使用:class綁定來根據(jù)條件動(dòng)態(tài)添加過渡的CSS類名，適用于根據(jù)條件動(dòng)態(tài)切換過渡效果的場(chǎng)景，根據(jù)不同的條件添加不同的過渡效果。

<template>
  <transition :name="transitionName">
    <p v-if="show">This is a dynamic transition element.</p>
  </transition>
  <button @click="toggleShow">Toggle Show</button>
</template>
<script>
export default {
  data() {
    return {
      show: false,
      transitionName: 'fade'
    };
  },
  methods: {
    toggleShow() {
      this.show = !this.show;
      this.transitionName = this.show ? 'slide' : 'fade';
    }
  }
};
</script>

JavaScript 鉤子函數(shù)

Vue提供了一些JavaScript鉤子函數(shù)，用于在過渡過程中執(zhí)行自定義的JavaScript代碼?？梢允褂?code>beforeEnter、enter、afterEnter、beforeLeave、leave、afterLeave等鉤子函數(shù)來執(zhí)行自定義的過渡邏輯。適用于需要在過渡過程中執(zhí)行自定義的JavaScript邏輯的場(chǎng)景，如動(dòng)態(tài)修改元素樣式等。

<template>
  <transition
    @before-enter="beforeEnter"
    @enter="enter"
    @after-enter="afterEnter"
    @before-leave="beforeLeave"
    @leave="leave"
    @after-leave="afterLeave"
  >
    <p v-if="show">This is a custom transition element.</p>
  </transition>
  <button @click="toggleShow">Toggle Show</button>
</template>
<script>
    export default {
        data() {
            return {
              show: false
            };
          },
        methods() {
            beforeEnter(el) {
              console.log('Before Enter');
              el.style.opacity = 0;
            },
            enter(el, done) {
              console.log('Enter');
              setTimeout(() => {
                el.style.opacity = 1;
                done();
              }, 1000);
            },
            afterEnter(el) {
                console.log('After Enter');
            },
            beforeLeave(el) {
              console.log('Before Leave');
              el.style.opacity = 1;
            },
            leave(el, done) {
              console.log('Leave');
              setTimeout(() => {
                el.style.opacity = 0;
                done();
              }, 1000);
            },
            afterLeave(el) {
              console.log('After Leave');
            },
            toggleShow() {
              this.show = !this.show;
            }
        }
    }
</script>

列表過渡

Vue提供了專門的列表過渡功能，用于在列表中添加過渡效果?？梢允褂?code><transition-group>組件來包裹列表項(xiàng)，并使用v-move、v-enter、v-leave等CSS類名來定義列表項(xiàng)的過渡效果。適用于在列表中添加過渡效果的場(chǎng)景，如列表項(xiàng)的漸顯、滑動(dòng)等過渡效果。

<template>
  <transition-group name="list" tag="ul">
    <li v-for="item in items" :key="item.id">{{ item.text }}</li>
  </transition-group>
  <button @click="addItem">Add Item</button>
</template>
<style>
.list-enter-active,
.list-leave-active {
  transition: all 0.5s;
}
.list-enter,
.list-leave-to {
  opacity: 0;
  transform: translateY(20px);
}
</style>
<script>
export default {
  data() {
    return {
      items: [
        { id: 1, text: 'Item 1' },
        { id: 2, text: 'Item 2' },
        { id: 3, text: 'Item 3' }
      ]
    };
  },
  methods: {
    addItem() {
      const newItem = {
        id: Date.now(),
        text: 'New Item'
      };
      this.items.push(newItem);
    }
  }
};
</script>

動(dòng)態(tài)過渡和動(dòng)畫：

Vue支持根據(jù)動(dòng)態(tài)數(shù)據(jù)來觸發(fā)過渡和動(dòng)畫效果?？梢允褂脛?dòng)態(tài)綁定來根據(jù)數(shù)據(jù)的變化來觸發(fā)過渡和動(dòng)畫效果。適用于根據(jù)動(dòng)態(tài)數(shù)據(jù)觸發(fā)過渡和動(dòng)畫效果的場(chǎng)景.

<template>
  <transition :name="transitionName">
    <p v-if="show">This is a dynamic transition element.</p>
  </transition>
  <button @click="toggleShow">Toggle Show</button>
</template>
<script>
export default {
  data() {
    return {
      show: false,
      transitionName: ''
    };
  },
  methods: {
    toggleShow() {
      this.show = !this.show;
      this.transitionName = this.show ? 'fade' : 'slide';
    }
  }
};
</script>

自定義過渡和動(dòng)畫

Vue允許自定義過渡和動(dòng)畫效果，以滿足特定的需求。可以使用<transition>和<transition-group>組件的屬性和事件來自定義過渡和動(dòng)畫效果。適用于需要自定義過渡和動(dòng)畫效果的場(chǎng)景，通過自定義CSS樣式和JavaScript鉤子函數(shù)來實(shí)現(xiàn)特定的過渡和動(dòng)畫效果。

<template>
  <transition
    name="custom-transition"
    @before-enter="beforeEnter"
    @enter="enter"
    @after-enter="afterEnter"
    @before-leave="beforeLeave"
    @leave="leave"
    @after-leave="afterLeave"
  >
    <p v-if="show">This is a custom transition element.</p>
  </transition>
  <button @click="toggleShow">Toggle Show</button>
</template>
<style>
.custom-transition-enter-active,
.custom-transition-leave-active {
  transition: opacity 0.5s, transform 0.5s;
}
.custom-transition-enter,
.custom-transition-leave-to {
  opacity: 0;
  transform: translateY(20px);
}
</style>
<script>
    export default {
      data() {
        return {
              show: false
          };
      },
      methods: {
         beforeEnter(el) {
              el.style.opacity = 0;
              el.style.transform = 'translateY(20px)';
            },
         enter(el, done) {
              setTimeout(() => {
                el.style.opacity = 1;
                el.style.transform = 'translateY(0)';
                done();
              }, 1000);
            },
         afterEnter(el) {
              // 執(zhí)行進(jìn)入后的操作
            },
         beforeLeave(el) {
              // 執(zhí)行離開前的操作
            },
         leave(el, done) {
          setTimeout(() => {
            el.style.opacity = 0;
            el.style.transform = 'translateY(20px)';
            done();
          }, 1000);
         },
         afterLeave(el) {
          // 執(zhí)行離開后的操作
         },
         toggleShow() {
          this.show = !this.show;
        }
      }
};
</script>

這些示例涵蓋了不同的過渡和動(dòng)畫應(yīng)用場(chǎng)景，可以根據(jù)具體的需求和場(chǎng)景選擇適合的示例。

以上就是一文搞懂Vue里的過渡和動(dòng)畫的詳細(xì)內(nèi)容，更多關(guān)于Vue 過渡和動(dòng)畫的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: