十、过渡动画 一、基础， 1.1 过渡： transition；1.2 变形 transform；1.3动画 animation；二、vue动画 贝塞尔曲线_transition当中的贝塞尔曲线怎么设置

一、基础

1.1 过渡： transition

• transition-property：设置应用过渡的CSS属性
• transition-duration：过渡效果持续的时间
• transition-timing-function 规定过渡效果的速度曲线
• transition-delay：过渡效果的开始时间

贝塞尔曲线cubic-bezier(x1, y1, x2, y2)：

• P0：默认值 (0, 0)
• P1：动态取值 (x1, y1)
• P2：动态取值 (x2, y2)
• P3：默认值 (1, 1)
  X 轴的取值范围是 0 到 1；Y 轴的取值没有规定，但是也不要太大。

常用的速度曲线：

• ease：cubic-bezier(.25, .1, .25, 1):
  
• linear：cubic-bezier(0, 0, 1, 1) / cubic-bezier(1, 1, 0, 0):
  
• ease-in：cubic-bezier(.42, 0, 1, 1):
  
• ease-out：cubic-bezier(0, 0, .58, 1) :
  
• ease-in-out：cubic-bezier(.42, 0, .58, 1)
  

自己的运用：

.box1 {
  width: 200px;
  height: 100px;
  background-color: aquamarine;
}
.box1:hover {
  width: 100px;
  height: 200px;
  background-color: rgb(229, 233, 183);
  //   transition: background-color 5s ease-out, width 3s ease 2s, height 2s ease 3s;//自己定义 需要过渡的 属性
  transition: all 3s ease;//全部属性的变化
}

1
2
3
4
5
6
7
8
9
10
11
12
13

效果：

1.2 变形： transform

平移、缩放、倾斜和旋转 ; 适用于行内元素和块元素

• translate()：移动元素对象，即基于X和Y坐标重新定位元素。
• scale()：缩放元素对象，可以使任意元素对象尺寸发生变化，取值包括正数、负数和小数。
• skew()：倾斜元素对象，取值为一个度数值。
• rotate()：旋转元素对象，取值为一个度数值。

1.2.1 2D变形

1.2.1.1 平移 transform:translate(x-value,y-value)

1.2.1.2 缩放 transform:scale(x-value,y-value)

• 参数值可以为正数、负数和小数，不需要加单位。
• 其中**正数用于放大元素**，负数用于翻转缩放元素，小于1的小数用于缩小元素。
• 如果第二个参数省略，则第二个参数默认等于第一个参数值。

小于1的小数：案例

1.2.1.3 倾斜 transform:skew(x-value,y-value)

• 参数值为角度数值，单位为deg ,取值可以为正值或者负值表示不同的的切斜方向。
• 如果省略了第二个参数，则取默认值0。

注意，自己的记忆方法，x轴倾斜30deg：就拿住x轴（平行于x轴的两根线不动），往右拉

1.2.1.4 旋转 transform:rotate(angle)

• 正数值，则按照顺时针进行旋转，否则按照逆时针旋转
• 注意 旋转中心

1.2.1.5 更改变换的中心点 transform-origin: x-axis y-axis z-axis

• 默认值分别为50% 50% 0px
• 属性值可以是百分比、em、px等具体的值，也可以是top、right、bottom、left和center这样的关键词。
• z-axis 用于3D变换

例子：

transform-origin: 0 0 0 就是 ：左上角

transform-origin: top right 0; 右上角

1.2.2 3D变形

transform:rotate3d(1,1,0,45deg) 数学思维对待这个就好，不举例子

• y、z可以取值0或1，当要沿着某一轴转动，就将该轴的值设置为1，否则设置为0。
• Angle为要旋转的角度。

1.3 动画 @keyframes animationname

animation: animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction;
1

1.动画名 animation-name:keyframename | none
2. 整个动画效果完成时间 animation-duration: time
3. 动画的速度曲线 animation-timing-function:linear |...
4. 执行动画效果延迟的时间 animation-delay:4s
5. 动画播放次数 animation-iteration-count: number | infinite
6. 动画播放的方向 animation-direction: normal | alternate

• normal为默认属性值，动画会正常播放，alternate属性值会使动画会在奇数次数（1、3、5 等等）正常播放，而在偶数次数（2、4、6 等）逆向播放。
• 只有动画播放次数大于等于2次时，animation-direction属性才会生效。

自己举的例子：

<style lang="scss" scoped>
@keyframes myAnimation1 {
  from,
  to {
    opacity: 0;
  }

  20% {
    opacity: 0.6;
    transform: translate(50px, 50px);
  }

  40% {
    opacity: 0.8;
    background-color: cadetblue;
  }
}
.box1 {
  width: 100px;
  height: 100px;
  background-color: aquamarine;

  animation: myAnimation1 10s linear 1s infinite alternate;
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

二、vue 文档：进入过渡、离开过渡

Vue文档官方参考文档链接

2.1 单元素/组件的过渡

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

2.1.1 过渡class

• 在进入/离开的过渡中，会有 6 个 class 切换。
• 注意： 如果你使用了一个没有名字的 <transition>，则v- 是这些 class 名的默认前缀。如上，如果你使用了<transition name="anim1">，那么 v-enter-from 会替换为 anim1-enter-from。
  

<style lang="scss" scoped>
//1、进入过渡的开始状态
.v-enter-from {
  opacity: 0;
  transform: translate(20px, 0);
}

// 2、进入过渡生效时的状态
.v-enter-active {
  transition: all 0.3s ease-out;
}

// 3、进入过渡的结束状态
.v-enter-to {
}

// 4、离开过渡的开始状态
.v-leave-from {
}

// 5、离开过渡生效时的状态
.v-leave-active {
  transition: all 0.5s ease;
}

// 6、离开过渡的结束状态
.v-leave-to {
  opacity: 0;
  transform: translate(20px, 0);
}

// .anim1-enter-active,
// .anim1-leave-active {
//   transition: opacity 0.5s ease;
// }
// .anim1-enter-from,
// .anim1-leave-to {
//   opacity: 0;
// }
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

2.1.1.1 Css 过渡 举例

自己举例：

<template>
  <div>
    <el-button type="primary" @click="show = !show">主要按钮</el-button>
    <!-- <transition name="anim1">
      <h5 v-if="show">文字 显示 动画</h5>
    </transition> -->
    <transition>
      <h2 v-if="show">文字展示动画</h2>
    </transition>
  </div>
</template>
1
2
3
4
5
6
7
8
9
10
11

<script>
export default {
  name: "XuexiKuangjiaVue3donghua",
  data() {
    return {
      show: false,
    };
  },
};
</script>
1
2
3
4
5
6
7
8
9
10

<style lang="scss" scoped>
// .anim1-enter-active,
// .anim1-leave-active {
//   transition: opacity 0.5s ease;
// }
// .anim1-enter-from,
// .anim1-leave-to {
//   opacity: 0;
// }

.v-enter-from {
  opacity: 0;
  transform: translate(20px, 0);
}
.v-enter-active {
  transition: all 0.3s ease-out;
}
.v-enter-to {
}

.v-leave-from {
}
.v-leave-active {
  transition: all 0.5s ease;
}
.v-leave-to {
  opacity: 0;
  transform: translate(20px, 0);
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

2.1.1.2 Css 动画 举例

<template>
  <div>
    <el-button type="primary" @click="showd = !showd">Css动画</el-button>
    <transition name="my-transition">
      <h3 v-show="showd">文字 文字 显示 css动画 实现</h3>
    </transition>
  </div>
</template>
1
2
3
4
5
6
7
8

@keyframes my-animation {
  from {
    opacity: 0;
  }
  10%,
  90% {
    opacity: 30%;
  }
  50% {
    opacity: 1;
    transform: translateX(50px);
  }
  to {
    opacity: 1;
  }
}

.my-transition-enter-active {
  animation: my-animation 5s;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

2.1.2 自定义过渡 class 类名

Vue 官方参考文档

• enter-from-class
• enter-active-class
• enter-to-class
• leave-from-class
• leave-active-class
• leave-to-class
  注意：它们的优先级高于普通的类名

自己举例：

<el-button type="primary" @click="showClass = !showClass">Css动画 class类名</el-button>
<transition name="my-transition1" enter-active-class="my-active-class">
   <h3 v-show="showClass">文字 文字 显示 css动画自定义class类名</h3>
</transition>
1
2
3
4

.my-active-class {
  animation-name: my-animation;
  animation-duration: 5s;
  animation-iteration-count: 5;
}

@keyframes my-animation {
  from {
    opacity: 0;
  }
  10%,
  90% {
    opacity: 30%;
  }
  50% {
    opacity: 1;
    transform: translateX(50px);
  }
  to {
    opacity: 1;
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

2.1.3 显性的过渡持续时间

<!-- 1、 过渡持续时间 (以毫秒计)：-->
<transition :duration="1000">...</transition>

<!-- 2、 分别指定进入和离开的持续时间：-->
<transition :duration="{ enter: 500, leave: 800 }">...</transition>
1
2
3
4
5

2.1.4 JavaScript 钩子

Vue 官方参考文档

<transition
  @before-enter="beforeEnter"
  @enter="enter"
  @after-enter="afterEnter"
  @enter-cancelled="enterCancelled"
  @before-leave="beforeLeave"
  @leave="leave"
  @after-leave="afterLeave"
  @leave-cancelled="leaveCancelled"
  :css="false"
>
  <!-- ... -->
</transition>
1
2
3
4
5
6
7
8
9
10
11
12
13

注意：添加 :css=“false” 也会让 Vue 会跳过 CSS 的检测，除了性能略高之外，这也可以避免过渡过程中受到 CSS 规则的意外影响。

2.2 多个元素之间的过渡

2.2.1 v-if / v- else来控制多个元素之间的切换

• 可以通过 v-if/v-else来完成元素之间的过渡(比如 有数据 和 暂无数据 之间的切换)
• 注意：

1. mode:在动画发生的同时，全部画面会被画出来，导致位置会发生问题
   • 可以用 绝对定位实现
   • 可以用 mode='out-in'实现
     • in-out: 新元素先进行进入过渡，完成之后当前元素过渡离开。
     • out-in: 当前元素先进行离开过渡，完成之后新元素过渡进入(实际使用)。
2. key:自己在测试的时候，没有key区分，过渡的动画效果会没有。

自己举例：

2.3 多个组件之间的切换

自己举例：

    <transition name="dgComponent" mode="out-in">
        <component :is="componentName" ref="elValue"></component>
     </transition>
1
2
3

.dgComponent-enter-from,
.dgComponent-leave-to {
  opacity: 0;
}

.dgComponent-enter-active,
.dgComponent-leave-active {
  transition: opacity 0.25s ease;
}
1
2
3
4
5
6
7
8
9

//上面 拿到子组件中的值
 this.text = this.$refs.elValue.value
1
2

三、vue 文档：列表过渡

官方文档 链接

注意：

• 默认情况下，它不会渲染一个包裹元素，但是你可以通过 tag attribute 指定渲染一个元素。
• 过渡模式不可用，因为我们不再相互切换特有的元素。
• 内部元素总是需要提供唯一的 key attribute 值。
• CSS 过渡的类将会应用在内部的元素中，而不是这个组/容器本身

动态过渡：

可以像style样式一样切换。
这里可以通过

• name 绑定控制 <transition name="no"> </transition>
• js 钩子 <transition @before-enter="beforeEnter" :css="false"> </transition>

四、vue 文档：状态过渡