transition

@Zhoujia

于 2021-06-02 07:40:10 发布

阅读量180

点赞数

原文链接：https://blog.csdn.net/m0_57142556/article/details/117452775

版权

transition

①transition：
包裹需要过渡的元素/组件,transition只会把过渡的效果应用到其包裹的内容上,而不会额外渲染DOM元素,也不会出现在可被检查的组件层级中。

②transition元素的属性:
(1)name -string，用于自动生成CSS过度类名。例如：name=“fade” 将自动扩展为 .fade-enter ，.fade-enter-active，等。默认类名为 “v”。
(2)appear -boolean，是否在初始渲染时使用过度。默认false
(3)css - boolean，是否使用 CSS 过渡类。默认为 true。如果设置为 false，将只通过组件事件触发注册的 JavaScript 钩子
(4)type - string，指定过渡事件类型，侦听过渡何时结束。有效值为 “transition” 和 “animation”。默认 Vue.js 将自动检测出持续时间长的为过渡事件类型。
(5)mode - string，控制离开/进入过渡的时间序列。有效的模式有 “out-in” 和 “in-out”；默认同时进行。
(6)duration - number | { enter: number, leave: number } 指定过渡的持续时间。默认情况下，Vue 会等待过渡所在根元素的第一个 transitionend 或 animationend 事件。

③

<template>
  <div id="app">
    <!--	  exclude后边跟组件的名字意思就是所除了Detail组件不会被缓存其他都会被缓存-->
    <!--	  exclude="Detail"-->
    <transition :name="trasitionName">
        <router-view class="Router" />
    </transition>
  </div>
</template>
 
<script>
export default {
  name: "App",
  data() {
    return {
      trasitionName: "left-slide"
    };
  },
  watch: {
    $route(to, from) {
      //   console.log(to);
      if (to.name == "Detail") {
        this.trasitionName = "slide-left";
      } else if (to.name == "home") {
        this.trasitionName = "slide-right";
      }
    }
  }
};
</script>
 
<style>
.Router {
  /* transition: all .8s ease; */
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
}
 
.slide-left-leave {
// 可以理解为将要离开的页面初始位置
  opacity: 1;
}
.slide-left-leave-to {
// 离开页面的最后位置
  transform: translateX(-100%);
}
.slide-left-enter {
// 进入页面的开始位置
  transform: translateX(100%);
}
.slide-left-enter-to {
// 进入页面的最终位置
}
.slide-left-leave-active,
.slide-left-enter-active,
.slide-right-enter-active,
.slide-right-leave-active {
  transition: all 0.8s ease;
}
// 自动生成的class类，添加一个过度属性
</style>

④css transition 属性：
把鼠标指针放到 div 元素上，其宽度会从 100px 逐渐变为 300px：

div
{
width:100px;
transition: width 2s;
-moz-transition: width 2s; /* Firefox 4 */
-webkit-transition: width 2s; /* Safari 和 Chrome */
-o-transition: width 2s; /* Opera */
}

transition 支持:谷歌浏览器、IE浏览器、火狐浏览器、Opera、Safari;

定义:
transition 属性是一个简写属性,用于设置四个过渡属性：

     (1)transition-property         规定设置过渡效果的 CSS 属性的名称。

     (2)transition-duration         规定完成过渡效果需要多少秒或毫秒。

     (3)transition-timing-function      规定速度效果的速度曲线。

     (4)transition-delay              定义过渡效果何时开始。