【快应用】如何避免过渡动画设置不生效

 【关键词】

过渡动画、transition

【问题背景】

快应用组件位置变更时，使用过渡动画时，组件位置直接切换了，设置的过渡动画效果没有生效，该如何处理？

代码如下：

【问题分析】

上述代码实现了一个item的横向移动的动画，通过left属性来显示的一个动画效果。但是在点击触发过渡动画时，是直接在对应位置显示的，动画效果并未展现。这是因为快应用中transition-property支持的通用样式属性如下：width，height，background-color，background-position，opacity，transform，暂不支持left属性来实现过渡动画。

【解决方案】

虽然快应用暂不支持left/right/top/bottom来实现过渡动画，我们仍然是可以实现这样的效果的，通过transform来控制就可以。

代码如下：