为啥 CSS 脉冲动画不能正常工作?
Posted
技术标签:
【中文标题】为啥 CSS 脉冲动画不能正常工作?【英文标题】:Why CSS pulse animation is not working without any errors?为什么 CSS 脉冲动画不能正常工作? 【发布时间】:2021-06-11 06:24:47 【问题描述】:codeSandbox link
'expense'和'income'是初始值为0的两个状态。 当支出金额大于收入金额时,需要以脉冲动画突出显示的支出容器金额。 我尝试使用检查费用金额值是否大于收入金额的条件来动态更改类,并且动画根本没有任何错误。
收入 - +价值 费用--价值
IncomeExpense.js *Here I have changed the class dynamically*
import React from "react";
import "./App.css";
const IncomeExpense = ( expense, income ) =>
return (
<div className="income-expense-container">
<div className="income-info">
<h3>INCOME</h3>
<h2 className="income-field">₹income</h2>
</div>
<div className="expense-info">
<h3>EXPENSE</h3>
<h2
className=`expense-field $
Number(expense) > Number(income) ? "-pulse" : ""
`> ₹expense * -1 </h2>
</div>
</div>
);
;
export default IncomeExpense;
App.css *css pulse animation code*
.expense-field
margin-top: 2px;
color: #c00000;
.expense-field-pulse
margin-top: 2px;
color: #c00000;
animation: glow 1s ease-in-out infinite alternate;
@keyframes glow
from
text-shadow: 0 0 10px #c00000, 0 0 20px #fff, 0 0 30px #c00000,
0 0 40px #c00000, 0 0 50px #c00000, 0 0 60px #c00000, 0 0 70px #c00000;
to
text-shadow: 0 0 20px #c00000, 0 0 30px #c00000, 0 0 40px #c00000,
0 0 50px #c00000, 0 0 60px #c00000, 0 0 70px #c00000, 0 0 80px #c00000;
【问题讨论】:
【参考方案1】:因为在你的结构中,费用永远不会大于收入,所以你需要删除费用字段后的空格,这个代码可以工作:
className=`expense-field$(expense * -1) > income ? "-pulse" : ""`
【讨论】:
以上是关于为啥 CSS 脉冲动画不能正常工作?的主要内容,如果未能解决你的问题,请参考以下文章
为啥我的 CSS 在使用 xampp 的 localhost 中不能正常工作,但在本地或从 Netlify 站点打开相同的文件时工作正常?