HTML5 перевод относительно страницы - PullRequest
Новая
       15

HTML5 перевод относительно страницы

2 голосов
/ 07 июня 2010

Как вы можете применить перевод к элементу, но сделать так, чтобы он перемещался в точку на странице, а не относительно себя?

Например, в приведенном ниже коде элементы «карты» переместятся на 50, 100 относительно их начальной позиции. Вместо этого я хочу, чтобы он переместился в центр страницы. 

<html>
<head>
<style>

.face {
    -webkit-backface-visibility: hidden;
    position: absolute;
    height: 140;
    width: 80;
    overflow: hidden;
}

.card {
    height: 100;
    width: 80;
    float: left;
    -webkit-box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.5);
    margin-left: 5px;
     -webkit-transition-property: transform;
     -webkit-transition-duration: 0.25s;
     -webkit-transition-timing-function: ease-out;
}

.activated {
    -webkit-transform: scale(2) translate(50px, 100px);
     -webkit-transition-duration: 0.35s;
     -webkit-transition-timing-function: ease-in;
}

</style>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>

$(document).ready(function () {
    $('.card').click(function (e) {
        e.preventDefault();
        $(this).toggleClass("activated");
    });
});

</script>
</head>

<body>

<div class="card">
<div class="face front">
<img src="http://upload.wikimedia.org/wikipedia/en/thumb/6/64/Edwin_P_Morrow.jpg/100px-Edwin_P_Morrow.jpg" />
<span>blah!</span>
</div>
<div class="face back">explanation</div>
</div>

<div class="card">
<div class="face front">
<img src="http://upload.wikimedia.org/wikipedia/en/thumb/6/64/Edwin_P_Morrow.jpg/100px-Edwin_P_Morrow.jpg" />
<span>blah!</span>
</div>
<div class="face back">explanation</div>
</div>

<div class="card">
<div class="face front">
<img src="http://upload.wikimedia.org/wikipedia/en/thumb/6/64/Edwin_P_Morrow.jpg/100px-Edwin_P_Morrow.jpg" />
<span>blah!</span>
</div>
<div class="face back">explanation</div>
</div>

<div class="card">
<div class="face front">
<img src="http://upload.wikimedia.org/wikipedia/en/thumb/6/64/Edwin_P_Morrow.jpg/100px-Edwin_P_Morrow.jpg" />
<span>blah!</span>
</div>
<div class="face back">explanation</div>
</div>


</body>
</html>

1 Ответ

2 голосов
/ 07 июня 2010

Я не думаю, что вы должны использовать translate() для этого. Я полагаю, что вы могли бы просто вычислить правильные значения или манипулировать transform-origin с помощью JavaScript, но такой вид отрицает цель использования CSS-преобразований.

Вы также можете анимировать свойства, чтобы вы могли удалить translate() из .activate и изменить свойство перехода для .card на: 

-webkit-transition-property: all;

Затем вы можете использовать «обычный» CSS для позиционирования, а переход сделает все остальное. Например. добавить эти свойства в .activated: 

position: absolute;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -40px;

Хотя есть небольшая проблема с этим. Хотя CSS может плавно переходить свойства top, left и margin, он не может плавно переходить свойство position, поэтому, когда карта активируется, она сначала переместится в верхний левый угол, а затем переместится плавно к центру страницы.

Я не уверен, есть ли какое-то решение, кроме как абсолютно точно позиционировать оригинальные карты.

Кроме того, при использовании translate() положение других карт не изменяется при активации одной из них. Однако в моем примере активированная карта вынимается из потока, поэтому другие карты будут перемещаться влево, чтобы заполнить пробел (как это делают плавающие элементы). Это может быть не то, что вы хотите. Этого не произойдет, если вы начнете с них всех.

Конечно, в самих спецификациях есть множество вопросов о подобных проблемах, учитывая, что они все еще экспериментальны:

...