一、CSS过渡和动画

  • transform
    • 定义元素及其子元素变换规则，允许你旋转，缩放，倾斜或平移给定元素
    • transform属性可以指定为关键字值none或一个或多个值
        • 要应用的一个或多个CSS变换函数。 变换函数按从左到右的顺序相乘，这意味着复合变换按从右到左的顺序有效地应用。
      • none：不应用任何变化
  • transition
    • 可以为一个元素在不同状态之间切换的时候定义不同的过渡效果，补充了中间帧
    • 语法
      • transition: 属性名时⻓过渡方式延迟
      • transition: left 200mS linear 可以用逗号分隔两个不同属性
      • transition: left 200ms, top 400ms 可以用all代表所有属性
      • transition: all 200ms
  • 过渡方式有: linear | ease ease-in | ease-out | ease-in-out | cubic-bezier step-start step-end steps,具体含义要靠数学知识
  • 并不是所有属性都能过渡
    • 如:display：none=>block没法过渡，要改成visibility：hidden=>visible ```javascript /第一个值为方向，第二个值为时间/ transition: width 1s; /宽度变化为1s/ /所有的变化都是1s/ transition：all 1s; /第三个参数为变化方式：/ transition：width1sliner; /线性变换/ /第四个参数为延迟/ transition：width1sliner3s; /三秒的延迟// Apply to 1 property // property name | duration / transition: margin-right4s; / property name | duration | delay / transition: margin-right4s1s; / property name | duration | timing function / transition: margin-right4sease-in-out; / property name | duration | timing function | delay / transition: margin-right4sease-in-out1s; / Apply to 2 properties / transition: margin-right4s, color1s; / Apply to all changed properties / transition: all0.5sease-out; / Global values / transition: inherit;transition: initial;transition: unset;
  2. - animation
  3.    - 首先使用@keyframes hello 来声明动画 
  4. ```javascript
  5. /*先用@keyframes声明一个变量*/
  6. @keyframes 动画名字{
  7.   /*声明过渡效果*/
  8.   from{
  9.     /*开始效果*/  
  10.   }
  11.   to
  12.   {
  13.     /*结束效果*/
  14.   }
  15.   /*或者定义中间多个过度效果*/
  16.   0%{
  17.     /*过度效果*/ 
  18.   } 33.3% 66.6%{
  19.     /*过度效果*/  }
  20.   100%{
  21.     /*过度效果*/  
  22.   }
  23. }
  25. /*之后再通过animation属性把定义的样式加上*/
  26. div{
  27.   animation: 动画名字1s(过度时间);
  28. }
  • 放在要加的动画元素上
  • div{
  • animation：动画名字 (过渡时间)
  • }
  • 语法：
    • 缩写语法：animation:时⻓|过渡方式| 延迟|次数|方向|填充模式|是否暂停|动画名;
    • 时⻓: 1s或者1000ms
    • 过渡方式:跟transition取值一样，如linear
    • 次数: 3或者2.4或者infinite
    • 方向: reverse | alternate、alternate-reverse
    • 填充模式: none | forwards | backwards | both
    • 是否暂停: paused | running以上所有属性都有对应的单独属性
      • 区别
  • transition需要触发一个事件
  • animation不需要触发任何事件的情况下也可以显式的随着时间变化来改变元素css的属性值，从而达到一种动画的效果。
  • transition属性是一个简单的动画属性，非常简单易用，可以说它是animation的简化版本

    二、使用Vue实现基础的CSS过渡与动画效果

  • 过渡：背景色由红变蓝

  • 动画：弹跳、移动、缩放等

    • 过渡示例 ```html <!DOCTYPE html>

Hello World

Hello World

- 动画示例html <!DOCTYPE html>

Hello World

Hello World

<a name="G1Rvh"></a> ### 三、单元素、单组件过渡的动画效果 - 入场出场过渡效果 - 入场：隐藏态->显示态 - 出场：显示态->隐藏态 - 结合Vue<transition>标签配合样式即可实现html <!DOCTYPE html>

Hello World
<a name="OL8JT"></a> ### 四、单元素、单组件入场出场动画html <!DOCTYPE html>

Hello World

Hello World
<a name="ta9Qz"></a> ### 五、结合第三方动画库实现 - 基础、用自定义样式指定入场、出场 - 第三方动画库：[https://animate.style/](https://animate.style/)html <!DOCTYPE html>

Hello World
<a name="ndCN6"></a> ### 六、列表动画html <!DOCTYPE html>
{{item}}
<a name="PKq8d"></a> ### 七、状态动画html <!DOCTYPE html>
{{animateNumber}}

```