收藏
回答

hover-stay-time 这个属性实际是编译成什么代码

框架类型 问题类型 API/组件名称 终端类型 微信版本 基础库版本
小程序 Bug view 工具 7.0.4 2.7.0

我想实现点击产生水波纹的效果。

如果用伪类 :active 实现,只会在点击那一下有效,手指一离开效果直接没了。没有按照设定时长来完成动画效果。

然后我发现有个hover-class 属性可以提带 :active ,还有 hover-stay-time 这个属性来让动画效果保留一段时间。

但用hover-class又无法实现:active 长按的水波纹效果,实在有点纠结。


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

1 个回答

  • Maverick
    Maverick
    2019-05-30

    hover-class 是按下后添加什么类名

    hover-start-time 是按下后几毫秒添加类名

    hover-stay-time 是松开后几毫秒移除类名


    完全可以实现:active可实现的效果呀

    2019-05-30
    赞同
    回复 8
    • Mo
      Mo
      2019-05-30

      长按效果实现不了

      2019-05-30
      回复
    • Maverick
      Maverick
      2019-05-30回复Mo

      你的长按效果指的是什么呢,手指移开前hover-class的类名是一直存在的,和pc上:active基本上相同的,有什么效果是:active能实现,hover-class不能实现的呢?

      2019-05-30
      回复
    • Mo
      Mo
      2019-05-30

      就像原生的水波纹效果啊

      2019-05-30
      回复
    • Mo
      Mo
      2019-05-30回复Maverick

      本来我是用:active 写的效果,长按效果和原生的一样,但是短按 离开的时候效果不能按预设时长跑完动画效果,会一下消失,所以我需要用到hover-stay-time

      2019-05-30
      回复
    • Maverick
      Maverick
      2019-05-30回复Mo

      那你就把hover-stay-time的时长设置为动画时长,这样保证至少能放完一次动画,但会导致连续点击时,后几次点击没动画;要实现比较好的效果的话就用touch相关事件吧

      2019-05-30
      回复
    查看更多(3)
登录 后发表内容