使用媒体查询平滑 CSS 过渡

Question

我正在尝试为 @media only screen and (max-width: #) 更改时放置在其他地方的 div 创建平滑过渡。这个想法是当最大宽度达到，比如说，600 像素时，div 平滑地过渡到另一个位置。

这是 fiddle： https://jsfiddle.net/8nQ6v/399/

这是一个类似的 fiddle，通过单击按钮控制转换： 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 在屏幕中定位元素。调整 window 大小以查看差异和平滑效果。

$(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>

使用媒体查询平滑 CSS 过渡

Smooth CSS transition using media queries

html

css-transitions