transition 过渡效果

实现方式：

div{
    background-color: blue;
    width: 100px;
    height: 100px;
     /* transition: width 1s, opacity 1s; */
    transition: all 1s;
}
div:hover{
    width: 200px;
    height: 200px;
    opacity: 0;
}

通常与hover配合使用
是复合属性，过度属性可以为具体CSS属性值(如width、opacity)，也可以是all
transition属性设置在元素本身而不是hover

animation 动画效果

实现方式：

定义关键帧规则 @keyframes
应用关键帧

div {
  width: 200px;
  animation: fadeIn 2s; /* 应用 fadeIn 动画 */
}

@keyframes fadeIn {
  0% {
    opacity: 0; /* 初始状态，完全透明 */
  }
  100% {
    opacity: 1; /* 结束状态，完全不透明 */
  }
}

注意事项

多个状态，而非两个状态之间的切换
animation属性值：
- 动画名称动画时长速度曲线延迟时间重复次数动画方向执行完毕时状态
- 必须包含动画名称和动画时长
- 不分先后顺序
- 如果有两个时间，前面一个为动画时长，第二个为延迟时间

animation: fadeIn 1s linear;  /* 匀速 */
animation: fadeIn 1s step(4);  /* 分步 */

animation: fadeIn 1s 2s;  /* 刷新后延迟2s后再播放 */

animation: fadeIn 1s infinite; /* 无限循环 */

animation: fadeIn 1s alternate; /* 正向播放完再反向播放一次 */

animation: fadeIn 1s forwards; /* 停在100% */
animation: fadeIn 1s backwards; /* 停在0% */

Vue自带组件Transition

官方文档： cn.vuejs.org/guide/built…

场景

渲染树结构改变，旧的元素被移除或者新的元素被添加

元素标签改变

<component :is = "h${idx}"> h${idx} </component>
<-- idx改变 -->

元素标签未改变，绑定了key

<div :key = "idx"> </div>` 
<-- idx改变 -->

v-if 属性，涉及元素的销毁和新增
v-show 属性

本质是display:none，从渲染树中移除；
与之对应的visibility:hidden由于没有从渲染树上移除，则不会有该效果

使用方法

使用transition标签包裹一个根元素，注意，一组 v-if和 v-else是一个根元素

<Transition>
  <Component :is="`h${idx}`">h{{ idx }}</Component>
</Transition>

使用css类，这些类在元素出现/消失前、出现/消失时、出现/消失后，动态增加和移除。效果类似于生命周期钩子。

/* 配合transition使用 */
.v-enter-active,
.v-leave-active {
  transition: opacity 1s ease;
}

.v-enter-from
.v-enter-to {
  opacity: 0;
}

/* 配合animation使用 */
.v-enter-active,
.v-leave-active {
  animation: bounce-in 0.1s;
}
@keyframes bounce-in {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1.25);
  }
  100% {
    transform: scale(1);
  }
 }

使用css时候，结合transform和opacity这种属性，不会引起布局改变；而不是margin这种属性。代价较小。
为了在同一vue文件中对不同transition组件定义不同的动画效果，可以给transition命名，方法如下：
```
<Transition name = "d">
  <Component :is="`h${idx}`">h{{ idx }}</Component>
</Transition>
```
使用style时，就可以
```
.d-enter-from
.d-enter-to {
  opacity: 0;
}
```

日拱一卒：动画实现方案 Vue组件Transition

transition 过渡效果

animation 动画效果

实现方式：

注意事项

Vue自带组件Transition

场景

使用方法