Transition

显示效果

1.图片or视频
2.效果代码下载

简介

现在您可以在 CSS 中使用 transition 属性来提升您应用的交互性与视觉感受，transition 中包括布局动画，即 LayoutAnimation，现在布局产生变化的同时也能使用 transition 带来的流畅动画。transition允许 CSS 的属性值在一定的时间区间内平滑地过渡。

参数

• transition-property：设置过渡动画的属性名，设置不同样式 transition 效果的键值对，默认值为空，表示不执行任何过渡效果，下表列出了所有合法的参数属性： | 参数名 | 描述 | | —- | —- | | width | 设置组件的宽度参与过渡动画 | | height | 设置组件的高度参与过渡动画 | | top | 设置组件的顶部距离参与过渡动画 | | bottom | 设置组件的底部距离参与过渡动画 | | left | 设置组件的左侧距离参与过渡动画 | | right | 设置组件的右侧距离参与过渡动画 | | background-color | 设置组件的背景颜色参与过渡动画 | | opacity | 设置组件的不透明度参与过渡动画 | | transform | 设置组件的变换类型参与过渡动画 |

• transition-duration：指定过渡的持续时间 (单位是毫秒)，默认值是 0，表示没有动画效果。

• transition-delay：指定请求过渡操作到执行过渡之间的时间间隔 (单位是毫秒或者秒)，默认值是 0，表示没有延迟，在请求后立即执行过渡。
• transition-timing-function：描述过渡执行的速度曲线，用于使过渡更为平滑。默认值是 ease。下表列出了所有合法的属性： | 属性名 | 描述 | | —- | —- | | ease | transition 过渡逐渐变慢的过渡效果 | | ease-in | transition 过渡慢速开始，然后变快的过渡效果 | | ease-out | transition 过渡快速开始，然后变慢的过渡效果 | | ease-in-out | transition 过渡慢速开始，然后变快，然后慢速结束的过渡效果 | | linear | transition 过渡以匀速变化 | | cubic-bezier(x1, y1, x2, y2) | 使用三阶贝塞尔函数中自定义 transition 变化过程，函数的参数值必须处于 0 到 1 之间。更多关于三次贝塞尔的信息请参阅 cubic-bezier
  和 Bézier curve
  . |

示例

<style scoped>
  .panel {
    margin: 10px;
    top:10px;
    align-items: center;
    justify-content: center;
    border: solid;
    border-radius: 10px;
    transition-property: width, height, background-color;
    transition-duration: 0.3s;
    transition-delay: 0s;
    transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1.0);
  }
</style>