Vue自定义动画/过渡

**** Vue2与Vue3 中 过渡动画 是有一丢丢区别的 。

Vue 提供了 transition 的封装组件，在下列情形中，可以给任何元素和组件添加进入/离开过渡

• 条件渲染 (使用 v-if)
• 条件展示 (使用 v-show)
• 动态组件
• 组件根节点

  例如： 在transition标签不给name属性时，默认为 .v-enter

<div id="demo">
  <button v-on:click="show = !show">
    Toggle
  </button>
  <transition name="fade">
    <p v-if="show">hello</p>
  </transition>
</div>



new Vue({
  el: '#demo',
  data: {
    show: true
  }
})



.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to  {
  opacity: 0;
}

Vue2 :

        

 Vue3 :

        vue3与2的区别在于

        由.v-enter   => .v-enter-from    其他属性不变

 

例vue3中过渡加动画

在main.js中

               组件页面要定位，否则会卡顿

<template>
  <router-view v-slot="{ Component }">
    <transition name="translate">
      <component :is="Component" />
    </transition>
  </router-view>
</template>

<style lang="scss">
* {
  margin: 0;
  padding: 0;
  list-style: none;
}
html,
body,
#app,
.home,
.login,
.about {
  height: 100%;
}
#app {
  position: relative;
}
.home,
.login,
.about {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}
.translate-enter-active {
  animation: info 1s;
}
.translate-leave-active {
  animation: rotate 1s linear;
}
@keyframes info {
  0% {
    transform: translate(100%);
  }
  100% {
    transform: translate(0%);
  }
}
@keyframes rotate {
  0% {
    transform: translate(0%);
  }
  100% {
    transform: translate(-100%) rotateZ(-180deg);
    transform-origin: left top;
  }
}
</style>