收藏
回答

小程序camera组件里面放入cover-view后animation动画失效

问题模块 框架类型 问题类型 API/组件名称 终端类型 微信版本 基础库版本
API和组件 小程序 Bug camera 客户端 WeChat Version 7.0.3 2.6.1

- 当前 Bug 的表现(可附上截图)

页面放入camera组件后,里面的cover-view的animation 属性失效; cover-view不发生任何动画效果(在开发工具模拟是没有任何问题的)


- 预期表现


- 复现路径


- 提供一个最简复现 Demo

<camera  class="camera1">

    

<cover-view class="hands2">hellow

   hello

</cover-view>

</camera >


wxss:

.camera1{

 position:relative;

width:100%;

height:100%

}

.hands2{

    position:absolute;

    top:0rpx;

    left:40rpx;

    width:100rpx;

    height:100rpx;

    animation: moveshadn 1s infinite;


}


@keyframes moveshadn{

from{

   left: 40rpx;

   

 }

 to{

    left:80rpx;

   }

}


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

2 个回答

  • 娇华
    娇华
    03-06

    请提供一下出现问题的机型和微信版本,以及能复现问题的简单代码片段(https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html)。

    03-06
    赞同
    回复 3
    • 持剑笑苍穹
      持剑笑苍穹
      03-06

      https://developers.weixin.qq.com/s/0rhS9Fmk7b6u

      03-06
      回复
    • Matthew
      Matthew
      04-12

      现在有一个关于map和详情展示的功能需求。详情面板使用cover-view搭建,利用改变它的高度和位置来实现切换动画。于是也出现了类似的BUG。在开发者工具上效果良好,动画效果,duration都展示正常。然后我使用真机来演示就出现不可预知的问题:

      1. 动画效果不出现,面板不切换位置和高度值。

      2. duration等参数设置无变化。

      3. 出现时好时坏的情况,动画可实现情况不稳定。

      以上就是暂时出现的所有问题。机型:HUAWEI P20Pro 微信版本:7.0.3

      相关代码

      onShow() {
          this.animationPanel = wx.createAnimation({
            duration: 1000,
            timingFunction: 'ease',
          })
          this.animationLocate = wx.createAnimation({
            duration: 1000,
            timingFunction: 'ease',
          })
        },
        // 活动详情面板动画
        setDetailPanelAni() {
          let panelFlag = this.data.detailFlag;
          let error = this.data.error;
          let flag;
          if (panelFlag && error != ''){
            // 面板开启,有错误信息
            flag = 0
          } else if (panelFlag && error == '') {
            // 面板开启, 无错误信息
            flag = 1
          } else if ( !panelFlag && error != '') {
            // 面板关闭,有错误信息
            flag = 2
          } else if ( !panelFlag && error == ''){
            // 面板关闭,无错误信息
            flag = 3
          }
          console.log(flag)
          switch (flag) {
            case 0:
              this.animationPanel.height('200rpx').step();
              this.animationLocate.bottom('380rpx').step();
              break;
            case 1:
              this.animationPanel.height('200rpx').step();
              this.animationLocate.bottom('330rpx').step();
              break;
            case 2:
              this.animationPanel.height('700rpx').step();
              this.animationLocate.bottom('880rpx').step();
              break;
            case 3:
              this.animationPanel.height('700rpx').step();
              this.animationLocate.bottom('830rpx').step();
              break;
          }
          this.setData({
            animationPanel: this.animationPanel.export(),
            animationLocate: this.animationLocate.export(),
            detailFlag: panelFlag ? false : true
          })
        },


      04-12
      回复
    • 娇华
      娇华
      04-12回复Matthew

      能否单独发个帖?提供出现问题的具体机型、微信版本号、系统版本号,以及能复现问题的代码片段(https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html),这样好跟进问题

      04-12
      回复
  • ShinBlueCat
    ShinBlueCat
    03-08

    感谢反馈,我们会尽快排查

    03-08
    赞同
    回复