transition

目录

原理

有哪些属性？

          代码：

---

Ⅰ、什么是transition？

transition是双标签，包裹要过度的元素/组件，transition只会把过度的效果应用到其包裹的内容上，而不会额外渲染DOM元素，也不会出现在可被检查的组件层级中。

原理

transition动画的实现是依靠css进行控制的，如果页面有多个transition的话可以通过修改name属性，分别给不同的transition添加变幻样式。

有哪些属性？

v-enter：显示/插入前的效果
v-active-enter：显示/插入的过渡时间和函数
v-enter-to：显示/插入后的效果
v-leave：隐藏/移除前的效果
v-active-leave：隐藏/移除的过渡时间和函数
v-leave-to：隐藏/移除后的效果
在使用属性时，将v换成transiton标签中的name值

如下：

   <transition :name="trasitionName">
    // exclude后边跟组件的名字意思就是所除了Detail组件不会被缓存其他都会被缓存
    <!-- exclude="Detail"-->

	  <keep-alive exclude="Detail">
		  <router-view class="Router"/>
	  </keep-alive>

   </transition>  

对于这些在过渡中切换的类名来说，如果你使用一个没有名字的 <transition>，则 v-是这些类名的默认前缀。如果你使用了 <transition name="my-transition">，那么 v-enter 会替换为 my-transition-enter。

v-enter-active 和v-leave-active 可以控制进入/离开过渡的不同的缓和曲线(ease ease-in ease-out liner)。
图一

 图二

图三

 

代码：

 <transition :name="slideType">
      <keep-alive include="home">
        <router-view class="Router" />
      </keep-alive>
    </transition>

<script>
export default {
  name: "App",
  data() {
    return {
      slideType: "slide-left",
    };
  },
  watch: {
    $route(to, from) {
      console.log(to);
      if (to.name == "Detail" && from.name == "home") {
        this.slideType = "slide-left";
      } else if (to.name == "home" && from.name == "Detail") {
        this.slideType = "slide-right";
      } else {
        this.slideType = "";
      }
    },
  }

<style>
.Router {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
}
.slide-left-enter {
  transform: translateX(100%);
  opacity: 0;
}
.slide-left-enter-to {
  opacity: 1;
}
.slide-left-leave {
  opacity: 1;
}
.slide-left-leave-to {
  opacity: 0;
  transform: translateX(-100%);
}

.slide-right-enter {
  opacity: 0;
  transform: translateX(-100%);
}
.slide-right-enter-to {
  opacity: 1;
}
.slide-right-leave {
  opacity: 1;
}
.slide-right-leave-to {
  opacity: 0;
  transform: translateX(100%);
}

.slide-left-enter-active,
.slide-left-leave-active,
.slide-right-enter-active,
.slide-right-leave-active {
  transition: all 1s l;
}