在MudBlazor .NET 6.0中实现CSS动画遇CS0103错误求助

问题描述 #

在MudBlazor .NET 6.0项目中尝试实现浅蓝色背景宽度从0%扩展到100%再收缩的循环动画，将参考HTML中的CSS直接嵌入组件后触发CS0103错误，提示“'keyframes' 当前上下文中不存在”。

参考HTML代码：

<!DOCTYPE html>
<html>
<head>
<style> 
.container {
  position: relative;
  width: 1000px; /* Set the width of the container */
  height: 100px; /* Set the height of the container */
}

.div-with-animation {
  position: absolute;
  top: 0;
  left: 0;
  width: 10px; /* Start width */
  height: 100%;
  background: lightblue;
  animation: expand-contract 4s infinite; /* Apply the animation with looping */
}

.text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Define the animation */
@keyframes expand-contract {
  0% {
    width: 10px; /* Start width */
  }
  50% {
    width: 1000px; /* End width */
  }
  100% {
    width: 10px; /* Back to start width */
  }
}
</style>
</head>
<body>
 <div class="container">
   <div class="div-with-animation"></div>
   <div class="text">
     <h1>The CSS Animation</h1>
   </div>
 </div>
</body>
</html>

用户的MudBlazor代码：

<style> 
.container {
  position: relative;
  width: 1000px; /* Set the width of the container */
  height: 100px; /* Set the height of the container */
}

.div-with-animation {
  position: absolute;
  top: 0;
  left: 0;
  width: 10px; /* Start width */
  height: 100%;
  background: lightblue;
  animation: expand-contract 4s infinite; /* Apply the animation with looping */
}

.text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Define the animation */
@keyframes expand-contract {
  0% {
    width: 10px; /* Start width */
  }
  50% {
    width: 1000px; /* End width */
  }
  100% {
    width: 10px; /* Back to start width */
  }
}
</style>
<div class="container">
   <div class="div-with-animation"></div>
<div class="text">
<MudText Typo="Typo.subtitle1"><b>Quick Actions</b></MudText>
</div>
 </div>

错误原因 #

Blazor组件默认启用CSS隔离，会自动给组件内的样式添加唯一作用域前缀，但@keyframes规则不会被正确处理，编译器会误将其识别为C#代码，从而抛出CS0103错误。

解决方法 #

方法1：使用::deep包裹动画定义 #

在组件的<style>中，用::deep包裹@keyframes，使其脱离CSS隔离的作用域限制：

<style> 
.container {
  position: relative;
  width: 1000px;
  height: 100px;
}

.div-with-animation {
  position: absolute;
  top: 0;
  left: 0;
  width: 10px;
  height: 100%;
  background: lightblue;
  animation: expand-contract 4s infinite;
}

.text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* 用::deep包裹动画定义 */
::deep @keyframes expand-contract {
  0% {
    width: 10px;
  }
  50% {
    width: 1000px;
  }
  100% {
    width: 10px;
  }
}
</style>
<div class="container">
   <div class="div-with-animation"></div>
   <div class="text">
      <MudText Typo="Typo.subtitle1"><b>Quick Actions</b></MudText>
   </div>
</div>

方法2：将动画定义放在全局CSS文件中 #

1. 打开项目wwwroot/css/site.css（或项目全局样式文件）
2. 添加动画定义：

@keyframes expand-contract {
  0% {
    width: 10px;
  }
  50% {
    width: 1000px;
  }
  100% {
    width: 10px;
  }
}

3. 组件内的<style>仅保留其他样式：

<style> 
.container {
  position: relative;
  width: 1000px;
  height: 100px;
}

.div-with-animation {
  position: absolute;
  top: 0;
  left: 0;
  width: 10px;
  height: 100%;
  background: lightblue;
  animation: expand-contract 4s infinite;
}

.text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
</style>
<div class="container">
   <div class="div-with-animation"></div>
   <div class="text">
      <MudText Typo="Typo.subtitle1"><b>Quick Actions</b></MudText>
   </div>
</div>

额外优化建议 #

可以将固定宽度1000px改为百分比（如100%），让动画适配容器宽度：

/* 修改动画关键帧 */
::deep @keyframes expand-contract {
  0% {
    width: 0%;
  }
  50% {
    width: 100%;
  }
  100% {
    width: 0%;
  }
}
/* 容器宽度也改为100% */
.container {
  position: relative;
  width: 100%;
  height: 100px;
}

内容的提问来源于stack exchange，提问作者Joe