离子含量纯CSS ionic 4中的无限渐变动画

Question

我想在我的 Ionic 4 项目中为页面模板的

ion-content

制作动画。像这样的东西：

.ion-content{
  height:400px;
  width:250px;
  background: linear-gradient(-45deg, #EE7752, #E73C7E, #23A6D5, #23D5AB);
  background-size: 400% 400%;
  animation: Gradient 7s ease infinite;
}

@keyframes Gradient {
  0% {
    background-position: 0% 50%
  }
  50% {
    background-position: 100% 50%
  }
  100% {
    background-position: 0% 50%
  }
}

<div class="ion-content"></div>

上面我想要

ion-content

中与纯

SCSS

相同的动画

Answer 1

遇到了同样的问题，终于找到了一种方法来动画离子含量的背景。

确实，--background 变量中的动画不起作用。 您只需在代码中添加

--background: unset;

即可。

完整解决方案： 在 /global.scss 中 ionic 应用程序的根目录中，添加此

ion-content {
--background: unset;
background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
background-size: 400% 400%;
animation: gradient 5s ease infinite;
}

@keyframes gradient {
0% {
 background-position: 0% 50%;
}

50% {
 background-position: 100% 50%;
}

100% {
 background-position: 0% 50%;
}
}

在我的 ionic 版本 6.20.4 上工作