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

 【关键词】

过渡动画、transition

【问题背景】

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

代码如下：

<template>
  <!-- Only one root node is allowed in template. -->
  <div class="container">
    <text class="title" onclick="startTransform">transition</text>
    <div class="item" style="left: {{pointerLeft}}px;"></div>
  </div>
</template>

<style>
  .container {
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .item {
    width: 150px;
    height: 80px;
    background-color: yellow;
    transition: left 1s ease;
  }
  .title {
    font-size: 60px;
  }
</style>

<script>
  module.exports = {
    data: {
      pointerLeft: 0
    },
    startTransform() {
      this.pointerLeft = 100
    }
  }

</script>

【问题分析】

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

【解决方案】

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

代码如下：

<template>
  <!-- Only one root node is allowed in template. -->
  <div class="container">
    <text class="title" onclick="startTransform">transition</text>
    <div class="item" style="transform: translateX({{pointerLeft}}px);"></div>
  </div>
</template>

<style>
  .container {
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .item {
    width: 150px;
    height: 80px;
    background-color: yellow;
    transform: translateX(0px);
    transition: transform 1s ease;
  }

  .title {
    font-size: 60px;
  }
</style>

 

<script>
  module.exports = {
    data: {
      pointerLeft: 0
    },
    startTransform() {
      this.pointerLeft = 100
    }
  }
</script>