微信原生小程序从右向左滑动展开关闭动画animation

要秃头的海绵宝宝

于 2023-08-14 12:01:25 发布

阅读量432

点赞数

文章标签： css html css3

本文链接：https://blog.csdn.net/m0_37751401/article/details/132272581

版权

从右向左的滑动展开关闭动画

“isOpen参数用来处理页面刚开始加载时的关闭动画”

js部分
初始化数据   isOpen: -1
 eventHeadImgOpen() {
    this.setData({
      isOpen: 1
    })
  },
  eventCloseHead() {
    this.setData({
      isOpen: 0
    })
  }

/***页面***/
<view class=" {{isOpen==1?'openAnima':isOpen==0?'closeAnima':''}}"  >
      <view class="closeIcon" bindtap="eventCloseHead"></view>
</view>
<view class="textHeadImg {{isOpen==1?'closeHeadAnima':'openHeadAnima'}}"   bindtap="eventHeadImgOpen"></view>

/***样式***/

openAnima {
  animation: openAnimation  1s forwards;

}
.closeAnima {
  animation: closeAnimation  1s forwards;

}

@keyframes openAnimation {
    0% {
    opacity: 0;
    transform: translateX(100%);
    }
    100% {
    opacity: 1;
    transform: translateX(0%);
    }
}


@keyframes closeAnimation {
  0% {
  opacity: 1;
  transform: translateX(0%);
  }
  100% {
  opacity: 0;
  transform: translateX(100%);
  }
}