平滑的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>