收藏
回答

小程序中页面动画只有首次切换有效,再次回到这个页面动画没有效果了?

<view class="box">
        <!-- 第一节课 -->
        <view class="big1box">
          <!-- 第一个小盒子的小盒子 -->
          <view class="bigbig1box">{{item.HourID==3 ? '13:10' : '15:00'}}</view>
          <view class="bigbig2box">{{item.HourID==3 ? '14:40' : '16:30'}}</view>
        </view>
        <view class="xian"></view>
        <view class="big2box">
            <!-- 第一个小盒子的小盒子 -->
          <view class="bigbig3box">{{item.Course}}</view>
          <view class="bigbig4box">第{{item.HourID}}节 {{item.Course=='体育' ? '体育场':item.classroom}}</view>
        </view>
        <view class="big3box">已结束</view>
      </view>



.box{
  display: flex;
  height:160rpx;
  border: 1rpx solid rgba(187187187100);
  padding:20rpx 10rpx;
  margin:15rpx 0rpx;
  border-radius: 20rpx;
  transform: rotateX(360deg);
  animation: boxaction 1s ;
}
@keyframes boxaction {
  0%{
    transform: rotateX(0deg);
  }
  100%{
    transform: rotateX(360deg);
  }
}


下面的方框都有一个翻转动作,这是用wxss实现的动画,我先就是通过每一次切换到这个页面都会执行这个动画,但是现在编译以后的第一次才会出现
这个动画,如果切换到其他页面再切换到这个页面,它这个动画也不执行。不知道怎么解决?希望可以帮帮忙!十分感谢



回答关注问题邀请回答
收藏

2 个回答

  • 俊杰Hiro
    俊杰Hiro
    03-23

    看起来是tab页面,一旦onload就不会再次触发onload了,除了onshow、onhide配合控制样式,我觉得还可以换个思路考虑把动画设计成循环播放的?

    03-23
    有用 1
    回复 1
    • 晚风
      晚风
      发表于移动端
      03-23
      okok,谢谢谢谢 非常感谢
      03-23
      1
      回复
  • 武曲心
    武曲心
    03-23

    你这是tabBar设置的页面吧?你加个变量在onshow时赋值true,onhide赋值false,用这个变量去控制动画类,比如<view class="box {{x ?‘动画类’ : ''}}">,当然也可以用小程序动画api去控制。

    03-23
    有用 1
    回复 1
    • 晚风
      晚风
      发表于移动端
      03-23
      ok,谢谢谢谢 非常感谢 这就试试
      03-23
      回复
登录 后发表内容
问题标签