# 动画

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

# Android 兼容性

v0.17.0以上支持。

# Android 兼容性

你有可能会遇如下Crash Unable to create layer for xxx 如果你的含有 transition-property 的 component 的大小 (长或宽) 超过了最大值，因为这会使 OpenGL 内存区域发生 OutOfMemory。

你的 component 的允许的最大值与机器有关，但一般来说，如果你的 component 的大小超过屏幕大小，就有可能触发Crash。

# 参数

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 (opens new window) 和 Bézier curve (opens new window).

# 示例

<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>

# Transform

# 注意事项

你有可能会遇如下Crash Unable to create layer for xxx 如果你的含有 transition-property 的 component 的大小 (长或宽) 超过了最大值，因为这会使 OpenGL 内存区域发生 OutOfMemory。

你的 component 的允许的最大值与机器有关，但一般来说，如果你的 component 的大小超过屏幕大小，就有可能触发Crash。

# 注意事项

除了perspective和transform-origin，transition支持了transform的全部能力。

目前支持的 transform 声明格式:

translateX({<length/percentage>})：X 轴方向平移，支持长度单位或百分比；
translateY({<length/percentage>})：Y 轴方向平移，支持长度单位或百分比；
translate({<length/percentage>} {<length/percentage>})：X 轴和 Y 轴方向同时平移，translateX + translateY 简写；
scaleX(<number>)：X 轴方向缩放，值为数值，表示缩放比例，不支持百分比；
scaleY(<number>)：Y 轴方向缩放，值为数值，表示缩放比例，不支持百分比；
scale(<number>)：X 轴和 Y 轴方向同时缩放，scaleX + scaleY 简写；
rotate(<angle/degree>)：将元素围绕一个定点（由 transform-origin 属性指定）旋转而不变形的转换。指定的角度定义了旋转的量度。若角度为正，则顺时针方向旋转，否则逆时针方向旋转；
rotateX(<angle/degree>)0.14+：X 轴方向的旋转；
rotateY(<angle/degree>)0.14+：Y 轴方向的旋转；
perspective(<length>)0.16+：指定了观察者与 z=0 平面的距离，使具有三维位置变换的元素产生透视效果。z>0 的三维元素比正常大，而 z<0 时则比正常小，大小程度由该属性的值决定。Android 4.1及以上版本支持；
transform-origin {length/percentage/关键字(top/left/right/bottom)}:：设置一个元素变形的原点，仅支持 2D 坐标。

# 示例

<template>
  <div class="wrapper">
    <div class="transform">
     <text class="title">Transformed element</text>
    </div>
  </div>
</template>

<style>
  .transform {
    align-items: center;
    transform: translate(150px, 200px) rotate(20deg);
    transform-origin: 0 -250px;
    border-color:red;
    border-width:2px;
  }
  .title {font-size: 48px;}
</style>

注意：在 native 端，给组件设置 transform 变换后，如果需要恢复原效果，不能直接删除对应的 transform 属性，而需要重新设置一个 transform 将元素变换恢复。

# 伪类 0.9.5

jsn 支持四种伪类：active，focus，disabled，enabled

所有组件都支持 active，但只有 input 组件和 textarea 组件支持 focus，enabled，disabled。

# 规则

同时生效的时候，优先级高覆盖优先级低。
- 例如：input:active:enabled 和 input:active 同时生效，前者覆盖后者。

# 线性渐变 0.10+

jsn 支持线性渐变背景

所有组件均支持线性渐变。

# Android 兼容性

你有可能会遇如下Crash Unable to create layer for xxx 如果你的含有 background-image: linear-gradient 的 component 的大小 (长或宽) 超过了最大值，因为这会使 OpenGL 内存区域发生 OutOfMemory。

你的 component 的允许的最大值与机器有关，但一般来说，如果你的 component 的大小超过屏幕大小，就有可能触发Crash。

# 使用

你可以通过 background-image 属性创建线性渐变。

background-image: linear-gradient(to top, #a80077, #66ff00);

目前暂不支持 radial-gradient（径向渐变）。

jsn 目前只支持以下六种渐变方向：

to right：从左向右渐变；
to left：从右向左渐变；
to bottom：从上到下渐变；
to top：从下到上渐变；
to bottom right：从左上角到右下角；
to top left：从右下角到左上角。

# 注意事项

background-image 优先级高于 background-color，这意味着同时设置 background-image 和 background-color，background-color 被覆盖。

background 不支持简写。