Как применить преобразование CSS, если у меня было преобразование при наведении?
Я сделал группу элементов и установил наведение для их класса
.cards:hover {
transition: 0.2s;
transform: translate( 0px, -50px);
height: 180px;
width: 120px;
background-size: 120px 180px;
}
В классе 10 элементов, и у меня есть файл JS, который при щелчке выделяет элемент, и я хочу, чтобы он вращался, поэтому я пишу JS и говорю ему добавить преобразование после щелчка, например
document.getElementById(idTag).style.transition = "3s ease";
document.getElementById(idTag).style.transform = "rotate(270deg)";
но не крутит. Вместо этого он идет прямо на 270 градусов по кратчайшему пути. Если я удаляю преобразование из наведения, оно вращается как обычно, но если у меня есть преобразование при наведении, оно не работает. Есть конфликт или что-то с эффектом наведения?
повернуть родительский элемент
У меня есть контейнер с 10 элементами, и я хочу, чтобы щелкнуть только один из элементов, чтобы что-то сделать, а другой остался нетронутым. Как взять 1 карту из разложенной колоды карт. Так что мне нужно сделать это индивидуально. Все работает без преобразования :hover, и я хочу знать, почему...
причина в том, что вы переопределяете преобразование, устанавливая встроенное преобразование. Вот почему вам нужно иметь дело с классами и CSS
Вы переопределяете многие вещи, почему это проблема? Чувак, ты ничем не помогаешь, извини. И я занимаюсь классами
Вы наводите курсор или кликаете? Выбери один.
Свойство перехода должно быть на .cards, а не на .cards:hover
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Чтобы переходить вертикальное смещение (перевод) и вращение отдельно, вам, вероятно, следует использовать другой способ перемещения элемента вверх. Использование свойства top и относительной позиции. Тогда у вас может быть следующий код css...
.cards {
position: relative;
transition: top 0.2s, transform 3s ease;
height: 180px;
width: 120px;
background-size: 120px 180px;
top: 0px;
transform: rotate(0deg);
}
.cards:hover {
top: -50px;
}
.cards.rotate {
transform: rotate(270deg);
}
И следующий код в вашем прослушивателе кликов, чтобы добавить класс поворота для поворота после щелчка.
document.getElementById(idTag).classList.add('rotate')
Теперь карточки должны двигаться вверх при наведении, но вращаться при клике с разными скоростями.
Спасибо за ответ, я сделал это с ключевыми кадрами.
Ах, хорошо, может быть, опубликовать это как ответ :-)
function drawCard() {
var Deck = document.getElementsByClassName("cards");
var idTag = this.id;
document.getElementById(idTag).classList.remove("cards");
document.getElementById(idTag).classList.add("draw-card");
for (i = 0; i < Deck.length; i++) {
Deck[i].style.display = "none";
}
document.getElementById(idTag).style.transition = "2s";
document.getElementById(idTag).style.left = "100px";
document.getElementById(idTag).style.animation = "rotate 2s linear forwards";
при щелчке я отделяю выбранную карту, меняя класс, а затем прокручиваю остальную часть класса, чтобы остальные карты исчезли. После этого я добавляю анимацию поворота с ключевыми кадрами в CSS.
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
Почему бы вам просто не добавить класс к элементу и оставить CSS для CSS?