При нажатии на кнопку стрелка (на клавиатуре) (keycode 37)
нужно показать иконку на на 300мс, замет скрыть её. И так на каждое нажатие кнопки.
Я создаю переменную с типом false
при нажатии кнопки, делаю её true
тем самым отображая иконку, при нажатии запускается запуская таймер на 300мс по истечению которого другая функция возвращает false
, тем самым пряча иконку.
Проблема заключается в том, что при частом многократном нажатии в какой-то момент иконка перестает появляться.
Может есть идеии как можно усовершенствовать этот подход или поменять на что-нибудь более толковое.
P.S.
В css
есть класс info_icons
для иконки. Когда иконка появляется для неё срабатывает анимация, то есть из прозрачной она становится не прозрачной и затем опять прозрачной.
Проще говоря она плавно появляется и исчезает.
P.P.S
Так же для других кнопок есть actions
. Суть такая же.
Я добавил один вариант, если получится придумать альтернативу или починить нижеизложенный код, то я смогу провернуть это дело с остальными кнопками :)
html
<v-icon v-if="replay_5" class="info_icons" size="50">
replay_5
</v-icon> //Material ui icon
Vue
data() {
return {
replay_5: false,
}
}
methods: {
show_replay_5() {
this.replay_5 = false;
},
onKeydown({
keyCode
}) {
switch (keyCode) {
case 37:
this.replay_5 = true;
/*some code*/
setTimeout(this.show_replay_5, 300);
break;
}
}
}
css
.info_icons {
animation-name: fadeInOpacity;
animation-iteration-count: 1;
animation-timing-function: ease-in;
animation-duration: 0.3s;
background-color: rgba(255, 255, 255, 0.3);
border-radius: 100%;
transform: scale(1.2);
opacity: 0;
}
@keyframes fadeInOpacity {
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
}
}
Спасибо за внимание!