В рейтинге участвует:

групп:

каналов:

Виртуальный сервер на SSD - недорого!

Аренда выделенных и виртуальных серверов (VDS/VPS), хостинг, аренда IP-адресов, администрирование, круглосуточная поддержка

qwarta.ru подробнее

Резервное копирование с проверкой на вирусы!!!

Удобный сервис создания резервных копий на любой сервер сети интернет. Отслеживайте изменения, проверяйте на вирусы. Надежно защитите свой бизнес!

go.backupland.com

Выбираете сервер? Любая конфигурация на заказ!

Аренда физических серверов любых конфигураций под любые запросы - 1С бухгалтерия, игровые сервера, нагруженные проекты, интернет-магазины!

qwarta.ru подробнее

Size: a a a

Frontend_ru

1207 membersпожаловаться на группу
2020 October 08

k

krau5 in Frontend_ru
Nick Volkov
Описание кейфреймов и всех остальных свойств анимации должен содержать базовый класс, который у элемента есть всегда. Добавь к нему animation-play-state: paused, а для .activated пропиши одно правило: animation-play-state: running
video_2020-10-08_16-19-29.mp4
(19.07 Мб)
.wheel-wrapper
    animation: spin 4s forwards
    animation-play-state: paused
    position: relative
    width: 30vw
    height: 100%

    &.activated
      animation-play-state: running

@keyframes
...
источник
16:20пожаловаться#1

NV

Nick Volkov in Frontend_ru
krau5
video_2020-10-08_16-19-29.mp4
(19.07 Мб)
.wheel-wrapper
    animation: spin 4s forwards
    animation-play-state: paused
    position: relative
    width: 30vw
    height: 100%

    &.activated
      animation-play-state: running

@keyframes
...
Тэкс, а можешь фидл накидать какой нить?
источник
16:26пожаловаться#2

S

Strayko in Frontend_ru
Khudayberdiyev_0022
Менял клавиши не помогло
а конфиг то настроил ?
источник
16:27пожаловаться#3

NV

Nick Volkov in Frontend_ru
krau5
video_2020-10-08_16-19-29.mp4
(19.07 Мб)
.wheel-wrapper
    animation: spin 4s forwards
    animation-play-state: paused
    position: relative
    width: 30vw
    height: 100%

    &.activated
      animation-play-state: running

@keyframes
...
в кейфреймах у тебя в 100 точке какой ротейт?
источник
16:27пожаловаться#4

K

Khudayberdiyev_0022 in Frontend_ru
Strayko
а конфиг то настроил ?
Какой конфиг run?
источник
16:34пожаловаться#5

S

Strayko in Frontend_ru
Khudayberdiyev_0022
Какой конфиг run?
С правмлами форматирования
источник
16:35пожаловаться#6

K

Khudayberdiyev_0022 in Frontend_ru
Strayko
С правмлами форматирования
Нет помоему где надо было сделать?
источник
16:36пожаловаться#7

NV

Nick Volkov in Frontend_ru
krau5
video_2020-10-08_16-19-29.mp4
(19.07 Мб)
.wheel-wrapper
    animation: spin 4s forwards
    animation-play-state: paused
    position: relative
    width: 30vw
    height: 100%

    &.activated
      animation-play-state: running

@keyframes
...
похоже что у тебя activated снимается раньше, чем анимация успеет проиграться полностью
источник
16:37пожаловаться#8

K

Khudayberdiyev_0022 in Frontend_ru
Strayko
С правмлами форматирования
Js чтоли?
источник
16:37пожаловаться#9

k

krau5 in Frontend_ru
Nick Volkov
похоже что у тебя activated снимается раньше, чем анимация успеет проиграться полностью
сделал, чтобы клас убирало через секунду после окончания анимации, теперь она вообще второй раз не играет
источник
16:41пожаловаться#10

NV

Nick Volkov in Frontend_ru
krau5
сделал, чтобы клас убирало через секунду после окончания анимации, теперь она вообще второй раз не играет
animation-iteration-count: infinite
источник
16:42пожаловаться#11

k

krau5 in Frontend_ru
Nick Volkov
animation-iteration-count: infinite
sticker.webp
(8.43 Кб)
источник
16:43пожаловаться#12

k

krau5 in Frontend_ru
а че так можно было шоле
источник
16:43пожаловаться#13

NV

Nick Volkov in Frontend_ru
можно вообще много чего)
источник
16:44пожаловаться#14

k

krau5 in Frontend_ru
бляяяя, я два дня ...кхм
источник
16:44пожаловаться#15

NV

Nick Volkov in Frontend_ru
krau5
бляяяя, я два дня ...кхм
фронтенд - он такой, да)
источник
16:45пожаловаться#16

NV

Nick Volkov in Frontend_ru
krau5
бляяяя, я два дня ...кхм
только у тебя сейчас каждый цикл рулеточка прокручивается на одинаковое количество градусов, тебе бы зарандомайзить время прокрутки (animation-duration) и с easing-функцией поиграться, чтобы было труъ. с дюрейшн можно вот так поcтупить: по клику на кнопку вызывать функцию 
Math.round(Math.random() * 10) + 1
и ее результат записать в свойство animation-duration, напрямую обратившись к дом элементу: 
el.style.animationDuration = `${result}s
источник
16:58пожаловаться#17

NV

Nick Volkov in Frontend_ru
ну либо сделать это в render функции в случае с React, в случае с Vue сделать метод который вернет число и вызвать его внутри шаблона
источник
17:00пожаловаться#18

K

Khudayberdiyev_0022 in Frontend_ru
Khudayberdiyev_0022
Js чтоли?
@nick_volkov вопрось открытая осталься? Есть решения?
источник
17:04пожаловаться#19

NV

Nick Volkov in Frontend_ru
Khudayberdiyev_0022
@nick_volkov вопрось открытая осталься? Есть решения?
по вебшторму не подскажу, года 4 назад юзал его последний раз
источник
17:13пожаловаться#20