Chuyển đổi CSS giữa trái -> phải và trên cùng -> vị trí dưới cùng

Question

Có thể sử dụng chuyển tiếp CSS để tạo hiệu ứng gì đó giữa một vị trí được đặt là left: 0px thành right: 0px để nó đi ngang qua màn hình không? Tôi cần phải thực hiện điều tương tự với từ trên xuống dưới. Tôi có bị mắc kẹt khi tính toán chiều rộng màn hình/kích thước đối tượng không?

#nav { 
    position: absolute; 
    top: 0px; 
    left: 0px; 
    width: 50px; 
    height: 50px; 
    -webkit-transition: all 0.5s ease-out; 
} 

.moveto { 
    top: 0px; 
    right: 0px; 
} 

và sau đó tôi sử dụng jQuery .addClass

Answer 1

Nếu bạn biết chiều rộng/chiều cao của phần tử hoạt hình bạn có thể di chuyển vị trí các (trên, dưới, trái, phải) và sau đó trừ đi bên lề tương ứng.

​.animate { 
    height: 100px; 
    width: 100px; 
    background-color: #c00; 
    -webkit-transition: all 1s ease; 
    -moz-transition: all 1s ease; 
    -o-transition: all 1s ease; 
    -ms-transition: all 1s ease; 
    transition: all 1s ease; 
    position: absolute; 
    left: 0; /*or bottom, top, right*/ 
} 

Và sau đó động tùy thuộc vào vị trí ...

.animate.move { 
    left: 100%; /*or bottom, top, right*/ 
    margin-left: -100px; /*or bottom, top, right */ 
} 

thi này có lẽ sẽ là mượt mà với transform: translate(x,y) nhưng tôi sẽ giữ nó như thế này vì vậy nó dễ hiểu hơn.

bản trình diễn: http://jsfiddle.net/nKtC6/

Answer 2

Điều này làm việc cho tôi trên Chromium. % Cho dịch là tham chiếu đến kích thước của hộp giới hạn của phần tử nó được áp dụng để nó hoàn toàn lấy phần tử đến cạnh dưới bên phải trong khi không phải chuyển thuộc tính được sử dụng để chỉ định vị trí của nó.

topleft { 
    top: 0%; 
    left: 0%; 
} 
bottomright { 
    top: 100%; 
    left: 100%; 
    -webkit-transform: translate(-100%,-100%); 
} 

Answer 3

Trong các trình duyệt hiện đại hơn (bao gồm cả IE 10+) bây giờ bạn có thể sử dụng calc():

.moveto { 
    top: 0px; 
    left: calc(100% - 50px); 
}