微信小程序-wx.createAnimation动画实现_wx.createanimation transformorigin

一、效果

说明：类似携程切换往返地址

二、实现

1）.wxml:

<view class="animation">
  <view class="dis-flex">
    <view class='flex3' animation="{
  {lAnimate}}">{
  {start}}</view>
    <view class='flex1' bindtap="trigger">
      <image src="../../images/change.png" class="flexImg" animation="{
  {imgAnimation}}"></image>
    </view> 
    <view class='flex3' animation="{
  {rAnimate}}">{
  {end}}</view>
  </view>
</view>

2).wxss:

.animation{
  margin-top: 20rpx;padding: 10rpx 30rpx;background-color: #FFFFFF;
}
.dis-flex{
  display: flex;
}
.flex1{
  flex: 1