Question

我有两个div：

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

媒体查询：

@media only screen and (min-width: 1281px) and (max-width : 1824px) {
    .map-ctn { width: 80%; }
    .list-ctn { width: 20%; }
}

@media only screen and (min-width: 961px) and (max-width : 1280px) 
{
    .map-ctn { width: 75%; }
    .list-ctn { width: 25%; }
}

我想启动.list-ctn div为0％，.map-ctn为100％，并根据Media Query激活将.list-ctn设为X％和.map-ctn为Z％。

编辑：

动画应该出现在jQuery事件（表单提交）上。

所以也许我需要使用jQuery来控制div，但是使用MédiaQQ信息根据每个div的宽度来设置宽度的动画。

它必须适用于IE9 +，Safari，Chrome和Firefox。

Answer 1

Yes there is a way. By using CSS3 transitions it is possible to animate the change. In this example the jQuery submit listener adds a class of submitted to the two divs. The media query rules in effect then become active. Please take note that this only works if there is an initial width defined for the element and not just the default. This will also not work in IE 9 or lower. EDIT: In response to your update I have added the jQuery submit listener. I assume that once the form is submitted that you will not want to have the elements switch back to their initial state. To make it easier to visualize what rules were in force I added some color. $(document).ready(function(){ $('#target').submit(function(event){ event.preventDefault(); $('.map-ctn').addClass('submitted'); $('.list-ctn').addClass('submitted'); }); }); .map-ctn{ height: 50px; width: 100%; background-color: green; transition: width 5s; } .list-ctn{ height: 50px; width: 0%; background-color: blue; transition: width 5s; } @media only screen and (min-width: 401px) and (max-width : 600px) { .map-ctn.submitted{ background-color: lightgreen; width: 80%; } .list-ctn.submitted{ background-color: lightblue; width: 20%; } } @media only screen and (min-width: 200px) and (max-width : 400px) { .map-ctn.submitted{ background-color: darkgreen; width: 75%; } .list-ctn.submitted{ background-color: darkblue; width:25%; } } <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="map-ctn"></div> <div class="list-ctn"></div> <form id="target"> <input type="submit" value="Submit"> </form>

Answer 2

setTimeout(function() {
  $('.mapexpanded').removeClass('mapexpanded');
}, 300);

And the Media Queries:
@media only screen and (min-width: 1281px) and (max-width : 1824px) {
    .map-ctn { width: 80%; }
    .list-ctn { width: 20%; }
}

@media only screen and (min-width: 961px) and (max-width : 1280px) 
{
    .map-ctn { width: 75%; }
    .list-ctn { width: 25%; }
}

.map-ctn { width: 60%; }
.list-ctn {width: 40%; }

.map-ctn, .list-ctn {
  transition: width 1s ease-in-out;
  height: 300px;
  background-color: red;
  margin-bottom: 10px;
}

html body .mapexpanded .map-ctn {
  width: 100%;
}
html body .mapexpanded .list-ctn {
  width: 0%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="mapexpanded">
  <div class="map-ctn zerowidth"></div>
  <div class="list-ctn zerowidth"></div>
</div>

我在这里使用JQuery只是为了缩短JS;不是因为它大量使用任何JQuery库。这里进行的动画都是CSS。

您的视口宽度与查询不匹配，因此我只添加了60％/ 40％。你可能真的想要别的东西;随意调整它。调整浏览器大小时它会自动移动。此外，您可以缩短setTimeout调用，或将其替换为requestAnimationFrame。

Answer 3

我不确定这是你所追求的，但对我来说似乎相当不错。我采用的方法依赖于新的功能（例如flex和classlist），但考虑到你正在使用媒体查询，这不应该是问题。

http://jsfiddle.net/BramVanroy/bf8895wq/5/或fullscreen demo（确保窗口足够宽！）

1。将init类添加到元素：

var init = document.getElementsByClassName("init");
while (init.length) {
    init[0].classList.remove("init");
}

2. 使用普通JS：

在加载时删除该类

transition: flex-grow 1200ms;

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

@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;}
}

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

com.google.inject.internal.InjectorImpl

考虑您的修改：http://jsfiddle.net/BramVanroy/bf8895wq/6/

基于CSS媒体查询的动态宽度动画

3 个答案: