0

HTML:

<div class="world" onmouseover="this.style.animation-name='a_Down' ">👋Hello, World!</div>

CSS:

.world {animation: a_Down 6s ease-in-out .5s}

это вырезка из рабочего (почти) https://codepen.io/oblominsk/pen/KKewqYg

В разных статьях предлагается менять один элемент стиля. А у меня целая анимация. В этом примере я пробовал подставлять ее элементы -- вроде animation-name: или animation-iteration-count: (чтобы она приобрела полный вид). Без animation-name: она работать не будет точно.

Анимация работает, но сама по себе , без внутреннего стиля в div, т.е. без onmouseover=.

Я знаю, то есть :hover , но также есть многочисленные Events , типа

onclick oncontextmenu onmouseover onmouseout onkeydown onkeyup onkeypress ...

Возможностей здесь больше.

В учебниках это вроде бы свойство JS --

 <element onmouseover="myScript">

а animation: -- это же CSS. Как их совместить ?

1 ответ 1

1

Можно повесить на класс эту анимацию, и добавлять класс.

function RandomInt(min, max) {
  return Math.floor(Math.random() * (max - min) + min);
}

let root = document.querySelector(":root");
root.style.setProperty("--random", RandomInt(7, 8));
let rand = getComputedStyle(document.body).getPropertyValue("--random");


let icon = document.querySelector(".icon");
icon.onmouseover = function(event) {
  let target = event.target;
  target.classList.add('world');
};
body {
  font-family: system-ui;
  background: #f06d06;
  color: white;
  text-align: center;
  font-size: 100px;
  overflow: hidden
}

:root {
  --visota: 100vh;
  --visota_menu: 120px;
  --visota_real: calc(var(--visota) - var(--visota_menu));
  --random;
}

@keyframes a_Down {
  from {
    transform-origin: center bottom
  }
  60% {
    transform: perspective(500px) translate3d(0px, var(--visota_real), 0px) rotateX(calc(var(--random, 1)*180deg)) rotateY(calc(var(--random, 1)*360deg)) rotateZ(calc(var(--random, 1)*180deg))
  }
}


/* по классу */

.world {
  animation: a_Down 6s ease-in-out .5s
}
<div class="icon" onmouseover="this.style.animation-name='a_Down' ">👋Hello, World!</div>

но это будет происходить только раз. Потом можете удалять класс по таймауту и можна будет запускать снова.

5
  • Я не смог повторить, хотя у вас все работает. Очень странно с этим CODEPEN. Меня также интересует, как вы смогли запустить мои нерабочие var(--random,1) У меня эта анимация работает (1 раз при загрузке), но это div делает по 1 обороту через каждую ось. Т.е. работает не --random , а только ее 1, т.к. она сама не определена. А у вас здесь, на форуме, совершается именно 7 или 8 оборотов, как указано в функции RandomInt(min,max){} . Как вам это удалось ?
    – serega da
    Commented 13 нояб. 2022 в 21:53
  • 1
    В вашем примере на кодепен, RandomInt не объявлено как функция...(там у вас не рабочий код) но это не относиться к суте вопроса. Commented 13 нояб. 2022 в 22:04
  • точно, куда то вылетела function . Спасибо, была она раньше. У мня в <div animation-name='a_Down'> она для красоты стоит, она не нужна. Это я пытался ее заставить работать анимацию. Я не знаю, что на ее место прописать. Теперь работает. Но 1 раз только. С таймаутом как-то сложно. Есть у меня примеры работы чистой onmouseover (столько раз сколько нужно), но она работает только через сторонние библиотеки. А тут все так рядом . Есть animate:, но не работает с onmouseover.
    – serega da
    Commented 13 нояб. 2022 в 22:14
  • Tclb я правильно понимаю, здесь заменяется класс .world на class="icon" . Или наоборот.
    – serega da
    Commented 13 нояб. 2022 в 22:22
  • Андрей, посмотрел ваши работы, все правильно.
    – serega da
    Commented 13 нояб. 2022 в 22:41

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.