Question

我正在尝试为@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＆amp; 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 将元素放置在屏幕中。调整窗口大小以查看差异和平滑效果。

＆＃13;

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

＆＃13;

#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);
  }
}

＆＃13;

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

＆＃13;

使用媒体查询平滑CSS转换

2 个答案: