uni-app style绑定css属性animation未生效，必须写在下面的css里面才生效

uni-app style绑定css属性animation未生效，必须写在下面的css里面才生效

开发环境 版本号 项目创建方式
Mac 11.5.2 HBuilderX

产品分类：uniapp/H5

浏览器平台：Chrome
浏览器版本：93.0.4577.82

示例代码：

<view :style="'width:150rpx;height:150rpx;background:red;animation:modeRight 5s infinite'"></view>  
<style>  
        .test{  
            width:100px;  
            height:100px;  
            background:red;  
            position:relative;  
            animation:modeRight 5s infinite;  
        }  

        @keyframes modeRight  
        {  
            from {  
              transform: translateX(0%);  
            }  
            to {  
              transform: translateX(100%);  
            }  
        }  
</style>

操作步骤：

任意一个vue文件写入：

<view :style="'width:150rpx;height:150rpx;background:red;animation:modeRight 5s infinite'"></view>  
<style>  
        .test{  
            width:100px;  
            height:100px;  
            background:red;  
            position:relative;  
            animation:modeRight 5s infinite;  
        }  

        @keyframes modeRight  
        {  
            from {  
              transform: translateX(0%);  
            }  
            to {  
              transform: translateX(100%);  
            }  
        }  
</style>

写在style里面是不生效的，但是我只要把style删了，改成class="test"就正常，由于我这个5s不是固定，会随机的，所以必须写在style里面

预期结果：

<view class="test"></view>  
<style>  
        .test{  
            width:100px;  
            height:100px;  
            background:red;  
            position:relative;  
            animation:modeRight 5s infinite;  
        }  

        @keyframes modeRight  
        {  
            from {  
              transform: translateX(0%);  
            }  
            to {  
              transform: translateX(100%);  
            }  
        }  
</style>

更多关于uni-app style绑定css属性animation未生效，必须写在下面的css里面才生效的实战教程也可以访问 https://www.itying.com/category-93-b0.html

10 回复

刚解决了，只有在app.vue里面定义的keyframes才能在style里面使用

更多关于uni-app style绑定css属性animation未生效，必须写在下面的css里面才生效的实战教程也可以访问 https://www.itying.com/category-93-b0.html


试了一下有同学提出的对象写法，同样不生效
<view :style="{'height':'150rpx','width':'150rpx','background':'red','animation':'modeRight 5s infinite'}"></view>

经测试，H5是真的不生效，但是微信浏览器正常，按理说这个是css特性，H5应该是兼容的吧？

同求解

我的也是,大佬解决了吗

并没解决

我今天也遇到了这个问题，但是很奇葩的是animate.css第三方库的就能用，这就很扯淡

我也遇到这个问题了，刚解决，可以把动画绑在一个新类名里面，然后条件添加类名，效果也一样

我来解答吧： 样式中添加了 scoped，会导致.alarmIcon中的 animation 和 keyframe 中的动画会添加一个唯一标识，然后调用函数的时候 animation 是没有对应的标识的。
解决方案 动画拎出来写个全局动画。第二种就是 style上写动画

这个问题是由于 [@keyframes](/user/keyframes) 动画定义在 <style> 标签中，而通过 :style 绑定的样式字符串中的 animation 属性无法正确引用到该动画导致的。

在 Vue/uni-app 中，通过 :style 绑定的样式是作为内联样式应用的，而 [@keyframes](/user/keyframes) 动画定义在样式表中。内联样式中的 animation 属性无法直接引用样式表中定义的 [@keyframes](/user/keyframes)，这是浏览器的安全限制。

解决方案有以下几种：

  1. 将 [@keyframes](/user/keyframes) 定义在全局样式文件中： 在 App.vue 的 <style> 标签中定义 [@keyframes](/user/keyframes)，这样动画定义就是全局可用的。

  2. 使用动态类名绑定： 既然动画时长是动态的，可以通过计算属性生成完整的动画字符串：

    <template>
  <view :class="testClass"></view>
</template>

<script>
export default {
  data() {
    return {
      duration: 5 // 可以动态改变
    }
  },
  computed: {
    testClass() {
      return `test test-${this.duration}s`
    }
  }
}
</script>

<style>
.test {
  width: 150rpx;
  height: 150rpx;
  background: red;
  position: relative;
}

.test-5s {
  animation: modeRight 5s infinite;
}

/* 可以定义多个时长类 */
.test-3s {
  animation: modeRight 3s infinite;
}

[@keyframes](/user/keyframes) modeRight {
  from {
    transform: translateX(0%);
  }
  to {
    transform: translateX(100%);
  }
}
</style>

  3. 使用 JavaScript 动态创建样式： 在 mounted 生命周期中动态创建 <style> 标签插入动画定义：

    <script>
export default {
  mounted() {
    const style = document.createElement('style')
    style.textContent = `
      [@keyframes](/user/keyframes) modeRight {
        from { transform: translateX(0%); }
        to { transform: translateX(100%); }
      }
    `
    document.head.appendChild(style)
  }
}
</script>
回到顶部