[JS, JQuery] Błąd usuwania klasy

Question

Witam

Mam mały problem z usuwanie klasy z elementu. Kod wygląda tak:

$('#diaryDelayMenu').click(function(){
    $('#diaryPlane').addClass('hidden');
    $('#diaryDelay').removeClass('hidden');

    $('#underlinePlane').addClass('see-out');
    $('#underlineDelay').addClass('see-in');
    $('#underlineDelay').removeClass('hidden-underline');

    setTimeout(function(){
        $('#underlinePlane').addClass('hidden-underline');

        $('#underlinePlane').removeClass('see-out');
        $('#underlineDelay').removeClass('see-in');
        console.log("dzila delay");
    }, 1000)
})

$('#diaryPlaneMenu').click(function(){
    $('#diaryPlane').removeClass('hidden');
    $('#diaryDelay').addClass('hidden');

    $('#underlinePlane').addClass('see-in');
    $('#underlineDelay').addClass('see-out');
    $('#underlinePlane').removeClass('hidden-underline');

    setTimeout(function () {
        $('#underlineDelay').addClass('hidden-underline');

        $('#underlinePlane').removeClass('see-out');
        $('#underlineDelay').removeClass('see-in');
        console.log("dziala plane");
    }, 1000)
})

I ma to działać tak że klasa jest nakładana i po sekundzie usuwana ale nie działa i się nie usuwa klasa z elementu. Dodam jeszcze ze na elemencie sią 3 klasy ale to chyba nie przeszkadza i jedno id.

Wie ktoś dlaczego to się nie usuwa??

 

[EDIT]

CodePen: https://codepen.io/Marak123/pen/mdWbrpK

Comments

Możesz pokazać jeszcze kod HTML, żeby można to było przetestować?

---

Dodałem link do codepen

---

Najciekawsze jest to ze bez animacje keyframe to normalnie działa tylko ze nie ma skalowania czyli tej animacja rozsuwania sie

Answer 1

Mała korekta i ... 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<div id="diaryMenu">
  <span id="diaryDelayMenu">Z Opóźnieniem</span>
  <span>|</span>
  <span id="diaryPlaneMenu">Zaplanowane</span>
</div>
<div id="underlineAll">
  <div class="underline" id="underlineDelay"></div>
  <div class="underline hidden-underline" id="underlinePlane"></div>
</div>

#diaryMenu {
    display: flex;
    justify-content: center;
    align-items: center;
    color: black;
    font-size: 20px;
    font-weight: bold;
}

#diaryMenu span {
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 20px;
    cursor: pointer;
}

#underlineAll {
    display: flex;
    justify-content: center;
}

#underlineAll div {
    margin-left: 32px;
    margin-right: 25px;
    margin-top: 4px;
    width: 150px;
    height: 2px;
    background-color: rgb(0, 136, 254);
}

.see-in {
    animation: scaler 1s forwards ease-out;
    -webkit-animation: scaler 1s forwards ease-out;
}

.see-out {
    animation: scaler 1s forwards reverse ease-out;
    -webkit-animation: scaler 1s forwards reverse ease-out;
}

.hidden-underline {
    background: transparent !important;
}

#diaryDelay, #diaryPlane {
    width: 800px;
    height: calc(100% - 80px);
    background-color: rgb(1, 26, 39);
    margin-left: auto;
    margin-right: auto;
    margin-top: 30px;
}

@keyframes scaler {
    from {
        transform: scale(0);
        -webkit-transform: scale(0);
        -moz-transform: scale(0);
        -ms-transform: scale(0);
        -o-transform: scale(0);
    }
    to {
        transform: scale(1);
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -ms-transform: scale(1);
        -o-transform: scale(1);
    }
}

$('#diaryDelayMenu').click(function(){
    $('#diaryPlane').addClass('hidden');
    $('#diaryDelay').removeClass('hidden');
 
    $('#underlinePlane').addClass('see-out');
    $('#underlineDelay').addClass('see-in');
    $('#underlineDelay').removeClass('hidden-underline');
 
    setTimeout(function(){
        $('#underlinePlane').addClass('hidden-underline');
 
        $('#underlinePlane').removeClass('see-in');
        $('#underlinePlane').removeClass('see-out');
        $('#underlineDelay').removeClass('see-in');
        $('#underlineDelay').removeClass('see-out');
        console.log("dzila delay");
    }, 1000)
})
 
$('#diaryPlaneMenu').click(function(){
    $('#diaryPlane').removeClass('hidden');
    $('#diaryDelay').addClass('hidden'); 
    
    $('#underlineDelay').addClass('see-out');
    $('#underlinePlane').addClass('see-in');
    $('#underlinePlane').removeClass('hidden-underline');
 
    setTimeout(function () {
        $('#underlineDelay').addClass('hidden-underline');
 
        $('#underlinePlane').removeClass('see-in');
        $('#underlinePlane').removeClass('see-out');
        $('#underlineDelay').removeClass('see-in');
        $('#underlineDelay').removeClass('see-out');
        console.log("dziala plane");
    }, 1000)
})

 

Comments

I że niby czemu to działa naprawdę wystarczyło dodać tylko 4 linijki które usuwają klase z elementu która się nie powinna nawet na nim znajdować, bo w CSS chyba nic nie zmieniałeś.

Dzięki za pomoc.

---

Nie, nie zmieniałem w css-ie. Animacja css jest wywoływana w monecie, gdy jest przypisywana do elementu, dlatego musi być usuwana i dodawana za każdym razem, ale sterowanie można uzyskać na inne sposoby np.: Controlling CSS Animations and Transitions with JavaScript

---

@VBService,

To to akurat wiedziałem ale jakoś tak css wykorzystuje może pokombinuje z js ale dzięki