小程序：动画

2022-04-08

animation文档、
animation属性文档

.side-nav-hide{
  animation:moveSide 2s; // 指定动画名称和时间
  animation-fill-mode : forwards; //动画停留在结束的位置
}
@keyframes moveSide{
from {right:20rpx;}
to {right:-40rpx;}
}

栗子：页面仔滑动的时候发生动画，并停留在动画结束位置

<image wx:if="{{ishow}}" src="logo.png" class="icon-kf {{showMoveLeft?'moveleft': ''}} {{showMoveRight?'moveright':''}}" bindtap="handleClick" ></image>

  let scrollTopTimeOut; // page对象外

// methods
  onPageScroll: function (e) {
    this.setData({
      showMoveRight: true,
      showMoveLeft: false,
      scrollTop: e.scrollTop,
    })
    let timer = setTimeout(() => {
      if (this.data.scrollTop === e.scrollTop) {
        this.setData({
          scrollTop: e.scrollTop,
        })
        clearTimeout(timer);
        this.setData({
          showMoveRight: false,
          showMoveLeft: true
        })
      }
    }, 500)
  },

.moveright {
  -webkit-animation: right 0.5s ease;
  animation: right 0.5s ease;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}
@-webkit-keyframes right {
  from {
    right: 0rpx;
    opacity: 1;
  }
  to {
    right: -226rpx;
    opacity: 0.5;
  }
}
@keyframes right {
  from {
    right: 0rpx;
    opacity: 1;
  }
  to {
    right: -226rpx;
    opacity: 0.5;
  }
}
.moveleft {
  -webkit-animation: left 1s ease;
  animation: left 1s ease;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}
@-webkit-keyframes left {
  from {
    right: -226rpx;
    opacity: 0.5;
  }
  to {
    right: 0rpx;
    opacity: 1;
  }
}
@keyframes left {
  from {
    right: -226rpx;
    opacity: 0.5;
  }
  to {
    right: 0rpx;
    opacity: 1;
  }
}