reactjs - 我正在尝试使用 Aos 进行动画处理,但由于某种原因,只有初始值被采用,然后动画直到结束
问题描述
这是我的 HTML
<section className="about-me">
<h1 >About me</h1>
<p data-aos="example" className="introduction">Hello, my name is</p>
这是我的动画 CSS
[data-aos="example"] {
opacity: 1;
transition-property: transform, opacity;
&.aos-animate {
opacity: 0;
}
@media screen and (min-width: 768px) {
transform: translateX(100px);
&.aos-animate {
transform: translateX(0);
}
}
}
该元素的不透明度为 0 并且永远不会变为 1。我无法弄清楚为什么这种情况一直发生。谢谢您的帮助
解决方案
推荐阅读
- bash - 如何让 Bash 将变量解释为字符串进行比较?
- reactjs - 如何使用 Webpack 中定义的环境变量?
- php - Eloquent hasManyThrough a belongsTo 关系?
- swift - 在主线程上使用 NSLock 安全吗?
- java - Hibernate-search 按数字列表搜索
- php - Slack 传入 Webhook - 更改操作 URL?
- ios - Compute Kernel Metal - 如何检索结果和调试?
- php - 唯一受支持的密码是具有正确密钥长度的 AES-128-CBC 和 AES-256-CBC
- java - 无法声明数组大小
- c# - 异步操作后变量未填充