样式设置旋转不生效

郭小白呀

于 2025-01-20 14:43:17 发布

阅读量173

点赞数 1

文章标签：前端 css less

本文链接：https://blog.youkuaiyun.com/qq_46372045/article/details/145262291

版权

不生效原因：

样式中使用了scoped

1. 模板：

<template>
  <div class="box">
    <div :style="styleObj">
      
    </div>
  </div>
</template>

2.设置样式：

样式使用计算属性获取

const styleObj = computed(() => {
    const res: Record<string, any> = {};
    if (props.rotate) {
      res.animation = 'rotating 0s linear infinite';
      res.animationDuration = props.duration / 1000 + 's';
    }

    return res;
  });

3.设置旋转：

<style lang="less">
  .box {
    @keyframes rotating {
      from {
        transform: rotate(0deg);
      }

      to {
        transform: rotate(360deg);
      }
    }
  }
</style>

以上操作即可设置旋转