---

title: animation type: references order: 3.1 version: 2.1

animation

Smooth and meaningful animation is very effective for enhancing the user experience of mobile application, you can use the animation module to perform animation on components. A animation can perform a series of simple transformations (position, size, rotation, background color, and opacity) on the component. So, if you have a image component, you can move, rotate, grow, or shrink it.

API

transition(node, options, callback)

Arguments

node

type: node

position: An element that will be animated, for example , specify the ref attribute for the element you want to animated as element, so you can get this element by calling this.refs.element.

options

type: object

position: Transition options.

• duration (number): Specifies the number of milliseconds of animation execution, the default value is 0, means that no animation will occur.
• delay (number): Specifies the amount of milliseconds to wait between a change being requested to a property that is to be transitioned and the start of the transition effect. The default value is 0.
• needLayout(boolean)：Whether or not the layout animation occurs when animation is executed，default value is false
• timingFunction (string): Used to describe how the intermediate values of the styles being affected by a transition effect are calculated, default value is linear, the allowed attributes are listed in the following table:

name	description
linear	Specifies a transition effect with the same speed from start to end
ease-in	Specifies a transition effect with a slow start
ease-out	Specifies a transition effect with a slow end
ease-in-out	Specifies a transition effect with a slow start and end
cubic-bezier(x1, y1, x2, y2)	Define your own values in the cubic-bezier function. Possible values are parameter values from 0 to 1. More information about cubic-bezier please visit cubic-bezier and Bézier curve.

• styles (object): Specify the names and values of styles to which a transition effect should be applied. The allowed attributes are listed in the following table:

name	description	value type	default value
width	The width applied to the component after the animation finished.	length	none
height	The height applied to the component after the animation finished.	length	none
backgroundColor	The background color applied to the component after the animation finished.	string	none
opacity	The opacity applied to the component after the animation finished.	number between 0 to 1	1
transformOrigin	The povit of transition. The possible values for x-aris are left/center/right/length or percent, and possible values of y-axis are top/center/bottom/ length or percent	x-axis y-axis	center center
transform	Transform function to be applied to the element. The properties in the following table are supported	object	none

properties of transform:

name	description	value type	default value
translate/translateX/translateY	Specifies the location of which the element will be translated to.	pixel or percent	none
rotate/rotateX v0.14+ /rotateY v0.14+	Specifies the angle of which the element will be rotated, the unit is degree.	number	none
perspective v0.16+	The distance between the z=0 plane and the user in order to give to the 3D-positioned element some perspective. Supported for Android 4.1 and above.	number	positive infinity
scale/scaleX/scaleY	Stretch or shrink the element.	number	none

• callback(function): Callback which is called after the completion of transition.NOTISE, after WeexSDK0.16.0, in iOS platform can get animation's message about completion, there are two types of parameters with result, is Successand Fail, Android can not support until now.

Example

<template>
  <div class="wrapper">
    <div ref="test" @click="move" class="box"></div>
  </div>
</template>

<script>
  const animation = weex.requireModule('animation')
  const modal = weex.requireModule('modal')

  export default {
    methods: {
      move () {
        var testEl = this.$refs.test;
        animation.transition(testEl, {
          styles: {
            color: '#FF0000',
            transform: 'translate(250px, 100px)',
            transformOrigin: 'center center'
          },
          duration: 800, //ms
          timingFunction: 'ease',
          needLayout:false,
          delay: 0 //ms
        }, function () {
          modal.toast({ message: 'animation finished.' })
        })
      }
    }
  }
</script>

<style scoped>
  .box {
    width: 250px;
    height: 250px;
    background-color: #DDD;
  }
</style>

try it