Супер противоречивая анимация в CSS и JavaScript ⇐ CSS

[Anonymous]

Я хочу сделать кнопку прокрутки, где текстовая часть прокручивается, когда вы наводите на нее курсор, и прокручивается назад, когда вы прекращаете наведение, но анимация действительно непоследовательна.
Этот код работает в первом цикле, но просто разваливается во время последующих циклов, no_length каким-то образом применяется, когда я все еще навожу курсор на кнопку, а когда я навожу курсор на classList, почему-то одновременно имеет значение no_length и full_length, иногда анимация исчезновения просто не завершается, и полоса мгновенно исчезает, иногда при наведении курсора на кнопку возникает задержка, я пробовал удалить каждый класс при наведении, а затем применить их позже, я пытался добавить состояние is_transitioning, чтобы остановить его постоянное выполнение, но ничего из этого, похоже, не работает.

Код: Выделить всё

var is_transitioning = false;

$(".btn").hover(appear, dissappear);

function appear() {
if (!is_transitioning) {
is_transitioning = true;
$(".button").removeClass("no_length");
$(".button").removeClass("full_length");
$(".button").removeClass("del_btn");
$(".button").addClass("move_btn");

setTimeout(function() {
$(".button").addClass("full_length");
$(".button").removeClass("move_btn");

}, 2000);
}
}

function dissappear() {
$(".button").removeClass("full_length");
$(".button").addClass("del_btn");
setTimeout(function() {
$(".button").addClass("no_length");
$(".button").removeClass("del_btn");
is_transitioning = false; // Reset transition state after the transition
}, 2000); // Time for disappear transition
}

Код: Выделить всё

.btn {
display: flex;
align-items: center;
width: 150px;
}

.btn:hover {
cursor: pointer;
.button {
background-color: #3f51b5;
}
.button_circle {
border-color: #3f51b5;
}
}

.button {
background-color: #4f7b8a;
border-radius: 20px;
width: 0;
color: #E5E4E2;
position: relative;
transform: translateX(-40px);
z-index: 0;
height: 25px;
padding-left: 30px;
font-size: 15px;
text-align: center;
}

.full_length {
width: 100px!important;
}

.no_length {
width: 0px!important;
}

.button_circle {
height: 40px;
width: 40px;
background-color: #bbb;
border-radius: 50%;
box-sizing: border-box;
border: 2px solid #4f7b8a;
display: inline-block;
z-index: 1;
}

.move_btn {
animation: appear 2s 0s 1 ease;
}

.del_btn {
animation: dissapear 2s forwards;
}

@keyframes appear {
0% {
width: 0;
}
100% {
width: 100px;
}
}

@keyframes dissapear {
0% {
width: 100px;
}
100% {
width: 0;
}
}

Код: Выделить всё

SEND MESSAGE

Подробнее здесь: https://stackoverflow.com/questions/791 ... javascript