使用媒体查询平滑 CSS 过渡答案

【问题标题】：Smooth CSS transition using media queries使用媒体查询平滑 CSS 过渡
【发布时间】：2016-02-17 22:58:18
【问题描述】：

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

这是一个类似的小提琴，转换是通过点击按钮来控制的： 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，它会立即跳到另一个位置。我想知道是否有办法顺利过渡。

【问题讨论】：

标签： html css-transitions

【解决方案1】：

这是一个示例，您可以如何做到这一点。您可以使用 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>

【讨论】：

【解决方案2】：

您可以使用 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>

【讨论】：