html - 媒体查询后没有触发css动画
问题描述
我有一个看起来像这样的列表
<ul class="timeline-container">
<li class="timeline-item-container">
<div class="timeline-item></div>
</li>
<li class="timeline-item-container">
<div class="timeline-item></div>
</li>
</ul>
我声明了 2 个动画
@keyframes slideLeft
{
from {
transform: translateX(1000px);
}
to {
transform: translateX(0);
}
}
@keyframes slideRight
{
from {
transform: translateX(-1000px);
}
to {
transform: translateX(0);
}
}
然后在我的CSS上我有这个:
.timeline-item
{
animation: slideRight .6s ease both;
@media (max-width:767px)
{
animation: slideLeft .6s ease both;
}
}
所以这很完美,当屏幕小于 767 像素时,我列表中的所有项目从右侧滑入,当屏幕更大时从左侧滑入。当我调整屏幕大小时,动画再次播放。
现在,当屏幕大于 767px 时,我希望列表中的每个奇数项目都从右侧滑入,所以我添加了这个:
.timeline-item-container:nth-child(even) .timeline-item
{
@media (min-width:767px)
{
animation: slideLeft .6s ease both;
}
}
如果我刷新页面但如果我调整屏幕大小,则动画不会播放。它应该像以前一样在屏幕调整大小时播放动画
我知道动画在那里,因为如果我刷新它,它就会播放,而不是在我调整屏幕大小之后
任何帮助都会得到帮助
解决方案
我认为唯一的方法是以不同的名称定义相同的动画两次。实际上您使用的动画是相同的,因此媒体查询不会再次触发它。
.box {
background:red;
animation:fromLeft 2s linear forwards;
}
@media all and (max-width:600px) {
.box {
background:blue;
display:block;
animation:fromLeft-alt 2s linear forwards;
}
}
@keyframes fromLeft {
from {
transform:translateX(-100%);
}
}
@keyframes fromLeft-alt {
from {
transform:translateX(-100%);
}
}
<div class="box">
some content
</div>
推荐阅读
- c++ - cocos2d win32完成应用开发后,报静态编译错误
- redirect - 301域直接-为什么http可以正常工作,但https网站不可用?
- reactjs - 每次新部署后清除 React 应用程序的浏览器缓存
- ruby-on-rails - Rails + MongoDB 不返回集合中的所有文档
- typescript - 用 jest 对递归异步函数进行单元测试
- react-native - Android 12 崩溃最新 react-native-track-player 版本
- reactjs - Next JS / mongoose:在保存新对象之前将 ObjectId 分配到数组中
- flutter - Flutter:VideoPlayerController.asset 不播放指定视频
- javascript - 如何在 .ejs 的对象数组中添加 HTML 标记或 URL
- kubernetes - IBM-MQ kubernetes helm 图表 ImagePullBackOff