使用媒体查询平滑CSS转换

Question

当@media only screen and (max-width: #)发生变化时，我正试图为放置在其他地方的div创建一个平滑的转换。这个想法是，当最大宽度达到600像素时，div会平滑地转换到另一个位置。

小提琴在这儿：https://jsfiddle.net/8nQ6v/399/

这是一把类似的小提琴，通过点击按钮控制过渡：http://jsfiddle.net/8nQ6v/2/

HTML

<div id="square" class="position">

CSS

#square {
   height: 100px;
   width: 100px;
   background-color: red;
}
.position {
    position: absolute;
    bottom: 20px;
    left: 20px;
}
@media only screen and (max-width: 600px){
    .position {
       position: static!important;
    }
}

使用当前的HTML&CSS会立即跳到另一个位置。我想知道是否有什么方法可以顺利过渡。

Answer 1

您可以使用css转换来动画

transition: ease all .5s;

和动画不要改变位置尝试改变值

#square {
  height: 100px;
  width: 100px;
  background-color: red;
  transition: ease all .5s;
}
.position {
  position: absolute;
  bottom: 20px;
  left: 300px;
}
@media only screen and (max-width: 600px) {
  .position {
    bottom: 20px;
    left: 20px;
  }
}

<div id="square" class="position">
</div>

Answer 2

下面是一个如何做到这一点的示例。您可以使用translate:transform在屏幕中定位元素。调整窗口大小以查看差异和平滑效果。

$(function() {
  $('#square').on('click', function() {
    $('#square').toggleClass('position');
  });
});

#square {
  width: 90px;
  height: 90px;
  background-color: tomato;
  position: absolute;
}
.animate {
  -moz-transition: all 1s ease-in-out, left 1.5s ease-in-out;
  -webkit-transition: all 1s ease-in-out, left 1.5s ease-in-out;
  -moz-transition: all 1s ease-in-out, left 1.5s ease-in-out;
  -o-transition: all 1s ease-in-out, left 1.5s ease-in-out;
  transition: all 1s ease-in-out, left 1.5s ease-in-out;
}
.position {
  transform: translate(300px, 200px);
}
@media only screen and (max-width: 600px) {
  .position {
    transform: translate(50px, 20px);
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="square" class="animate">
</div>