收藏
回答

每次点击,从头开始播放一段动画,怎么做?

目标效果:每次点击,对象的opacity从1变为0。


尝试方法1 - css法

animate: fadeout 3s ease-out forwards;

播放到头停止,但不知道怎么在点击后让它从头开始再播放一次。控制播放并不会从头。

网页版的话可以移除class再添加,但小程序不知道怎么做。


尝试方法2 - 小程序createAnimation

好像每次都会缓慢亮起opacity:1,然后再缓慢谈出opacity:0。

想要的效果是一下子亮起,然后慢慢谈出。

PS:如果再要叠加一个zoom:1.5 -> 1,怎么叠加?好像动画会分两段实现,不是同时。

最后一次编辑于  02-01  (未经腾讯允许,不得转载)
邀请回答
复制链接收藏投诉关注问题回答

2 个回答

  • 铭锋科技
    铭锋科技
    02-01

    js:

    toogleani(){

    this.setData({

    ani:!this.data.ani

    })

    },




    wxml:


    <view class='{{ani?"ani":""}}'>

    一些内容

    </view>

    <view bindtap='toogleani'>打开OR关闭动画</view>




    wxss:


    .ani{

    animation: fadeout 3s ease-out forwards;

    }


    @keyframes fadeout {

    100%{

    opacity: 1;

    }

    0%{

    opacity: 0;

    }

    }


    02-01
    赞同
    回复 4
    • 💯😊小平
      💯😊小平
      02-01

      感谢!

      但是这个是点一次移除class,然后下次点击加上吧?

      如果我要播放完自动停止,下次点击从头播放的话呢?

      02-01
      回复
    • 铭锋科技
      铭锋科技
      02-01回复💯😊小平

      data里面设置ani为false,js改一下


      toogleani(){

      this.setData({

      ani:true

      },()=>{

      setTimeout(()=>{

      this.setData({

      ani: false

      })

      },1000)

      })

      },


      02-01
      回复
    • 💯😊小平
      💯😊小平
      02-01

      感谢感谢!很有启发!

      其实这样一来,简单动画我可以直接transition了,设两个或多个class切换状态就可以了。


      02-01
      回复
    • 铭锋科技
      铭锋科技
      02-01回复💯😊小平

      02-01
      回复
  • 💯😊小平
    💯😊小平
    02-01

    明白了!感谢感谢!

    02-01
    赞同
    回复