Вращение изображений на основе CSS nth-child - PullRequest
Новая
       7

Вращение изображений на основе CSS nth-child

4 голосов
/ 03 января 2012

Я смог написать карусель JavaScript и подумал, что может быть более компактно использовать CSS-переходы с селекторами nth-child, например: 

img {
    transition: all 1s linear; /* or corresponding vendor prefixes */
    position:absolute;
}

img:nth-child(1) {
    top: 0%;
    left: 0%;
}

img:nth-child(2) {
    top: 0%;
    left: 50%;
}

/*and so on...*/

Затем элементы будут вращаться путем добавления первого дочернего элемента или добавления последнего дочернего элемента контейнера: 

parent.appendChild(parent.children[0]);

Этот подход хорошо работает для всех, кроме добавленного элемента. Он полностью удаляется, а затем снова присоединяется, поэтому он оказывается в нужном месте, но не использует эффект перехода . Есть ли способ использовать CSS-переходы даже при перемещении элемента в DOM?

jsFiddle Demo - Щелкните на документе, чтобы продвинуть изображения.

Ответы [ 3 ]

1 голос
/ 03 января 2012

Очень интересный вопрос. И вот решение, которое я придумал. Добавляет некоторую разметку и немного CSS, но выполняет это, все еще используя nth-child. Честно говоря, я могу поработать над этим чуть позже и посмотреть, не смогу ли я придумать более элегантное решение, но сейчас я раздвоил jsFiddle .

Суть его в том, чтобы переключить класс на div-обертку и использовать его для переключения между стилями.

Однако, насколько ваш реальный вопрос о том, можете ли вы анимировать добавляемое изображение, вы можете, но не так, как вы думаете здесь. Это будет начальная анимация добавления, которая будет означать, что при первой загрузке страницы она будет анимирована. Вы можете сделать это, используя @ keyframes , и установить его так, чтобы желаемое изображение скользило на месте из начальной позиции, где оно было бы. Но, опять же, это произойдет и при первой загрузке. Вы можете подделать его, «вращаясь на месте» для первой загрузки. Таким образом, все изображения вращаются один раз при загрузке.

1 голос
/ 03 января 2012

Что вы можете сделать, так это добавить или удалить имя класса из элемента. Например, у вас есть элемент div. И его значение класса class="item". Если вы добавите другое имя класса с анимацией в список имен классов этого элемента, то этот элемент div немедленно покажет эту анимацию.

например. div.className += " animatedClass";

0 голосов
/ 05 августа 2012

В итоге я использовал атрибут data-* и селектор. Это немного более многословно, чем nth-child, но имеет преимущество работы. Это также чище, чем разбор списков классов.

Каждый элемент имеет атрибут data-order, который можно назначить с помощью HTML или JavaScript: 

<img src="http://placekitten.com/203/203" data-order=0 />

Заменить nth-child на селектор атрибутов: 

img[data-order="1"] {
    top: 0%;
    left: 50%;
}

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

var forEach = [].forEach,
    nodes = document.body.children,
    length = nodes.length;

//On rotate:
forEach.call(nodes, function(node) {
    node.dataset.order++;
    node.dataset.order %= length;
});

Вот окончательный результат .

...