Jquery CSS媒体查询中的动态宽度动画

我有两个部门：

<div class="map-ctn"></div>
<div class="list-ctn"></div>

我想用0%启动.list ctn div，用100%启动.map ctn，并根据活动的媒体查询设置.list ctn do X%和.map ctn to Z%的动画

编辑：

动画应该发生在jQuery事件（表单提交）上

因此，也许我需要使用jQuery控制div，但使用Média Query info根据每个div的宽度设置宽度动画

---

它必须在IE9+、Safari、Chrome和Firefox上运行。

是的，有办法。通过使用CSS3转换，可以设置更改的动画。在本例中，jquerysubmit侦听器向两个

div

s添加一个

submitted

类。然后，生效的媒体查询规则将变为活动状态。请注意，只有在为元素定义了初始宽度（而不仅仅是默认宽度）时，此选项才有效。这在IE 9或更低版本中也不起作用

编辑：为了响应您的更新，我添加了jQuery提交侦听器。我假设表单提交后，您将不希望让元素切换回初始状态

为了更容易直观地看到现行的规则，我添加了一些颜色

$（文档）.ready（函数（）{
$（“#目标”）.submit（函数（事件）{
event.preventDefault（）；
$（'.map ctn'）.addClass（'submitted'）；
$（'.list ctn'）.addClass（'submitted'）；
});
});
.map-ctn{
高度：50px；
宽度：100%；
背景颜色：绿色；
过渡：宽度5s；
}
.list ctn{
高度：50px；
宽度：0%；
背景颜色：蓝色；
过渡：宽度5s；
}
@仅介质屏幕和（最小宽度：401px）和（最大宽度：600px）{
.map-ctn已提交{
背景颜色：浅绿色；
宽度：80%；
}
.list-ctn.已提交{
背景颜色：浅蓝色；
宽度：20%；
}
}
@仅介质屏幕和（最小宽度：200px）和（最大宽度：400px）
{        
.map-ctn已提交{
背景色：暗绿色；
宽度：75%；
}
.list-ctn.已提交{
背景色：深蓝色；
宽度：25%；
}
}


setTimeout（函数（）{
$（'.mapexpanded'）.removeClass（'mapexpanded'）；
}, 300);
和媒体查询：
@仅介质屏幕和（最小宽度：1281px）和（最大宽度：1824px）{
.map ctn{宽度：80%；}
.list ctn{宽度：20%；}
}
@仅介质屏幕和（最小宽度：961px）和（最大宽度：1280px）
{
.map ctn{宽度：75%；}
.list ctn{宽度：25%；}
}
.map ctn{宽度：60%；}
.list ctn{宽度：40%；}
.map ctn、.list ctn{
过渡：宽度1s，易于进出；
高度：300px；
背景色：红色；
边缘底部：10px；
}
html body.mappended.map ctn{
宽度：100%；
}
html body.mappended.list ctn{
宽度：0%；
}
我不确定这就是你想要的，但对我来说已经足够漂亮了。我采用了一种依赖于新特性（如flex和classlist）的方法，但考虑到您使用的是媒体查询，这应该不是什么问题

或者（确保窗户足够宽！）

1.将初始化类添加到元素：

<div class="map-ctn init"></div>
<div class="list-ctn init"></div>

3.确保在CSS中添加到flex grow的过渡：

transition: flex-grow 1200ms;

4.现在，您的媒体查询只需保留一行：

@media only screen and (min-width: 1281px) and (max-width : 1824px) {
    .map-ctn {flex-grow: 4;}
}
@media only screen and (min-width: 961px) and (max-width : 1280px) {
    .map-ctn {flex-grow: 3;}
}


考虑到你的编辑：
取决于你想写多少媒体查询。我还有两个，一个用于平板电脑，另一个用于智能手机。嗨，谢谢！请检查编辑我有关于如何根据媒体查询信息管理div宽度的传统详细信息。您好，谢谢。我已经根据你的建议构建了一个解决方案。我只是想警告你；我看到了你的评论，但没有编辑我的帖子，因为我不知道有什么简单的方法可以得到IE9的支持。（IE9不支持transition属性！）当然，根据您的要求，可能只是让IE9用户看不到转换；这段代码仍然会设置它们的宽度，只是瞬间设置，而不是平滑设置。（在旧浏览器/旧系统上，即使是基于JQuery的动画也可能有点累人）嗨，是的，我已经测试过了，但对IE9来说最重要的是显示列表；）再次感谢你的帮助嗨，谢谢！请检查编辑我有关于如何根据媒体查询信息管理div宽度的传统详细信息。请立即尝试。我已将其更新为在SO代码容器的上下文之外工作。事件监听器现在在文档准备好后被附加，并且页面没有使用表单提交重新加载。您好，谢谢。我已经将@Katana314设置为正确答案，因为它比我用于解决方案的答案更接近。嗨，谢谢！请检查编辑我有关于如何根据媒体查询信息管理div宽度的其他详细信息。@请参阅我的编辑。在将来，当你第一次问你的问题时，请尽可能精确。因此，抱歉@Bram，当答案开始出现时，我突然想到我必须将问题更改为更清楚。
transition: flex-grow 1200ms;

@media only screen and (min-width: 1281px) and (max-width : 1824px) {
    .map-ctn {flex-grow: 4;}
}
@media only screen and (min-width: 961px) and (max-width : 1280px) {
    .map-ctn {flex-grow: 3;}
}