Is there anything like command priority in jquery?

Question

I am creating a page, and on this page there is a side menu, and on top of the side bar there is a menu icon, which when clicked makes the bar appear and disappear, to disappear I am using "display - None" and to appear "display - grid", because I am using "grid layout" to style, the problem I’m having is when creating the animations, when the menu is to appear, the animation works, to disappear, no, I think it’s because I’m using "display - None" and then it doesn’t make the animation.

 $(function(){
  var sidebar_page = $('.sidebar-page')
  var content = $('.content')
  let footer = $('.footer')
  let tipoanimacao = 'testess teste'
  let tipoanimacao2 = 'testess teste2'


  $('.sidebar-toggle-box').on('click', function(){

    if (sidebar_page.css("display") == "none") {
      sidebar_page.css("display", "grid").addClass(tipoanimacao)
      content.css("grid-area", "2 / 2 / 3 / 3").addClass(tipoanimacao)
      footer.css("grid-area", "3 / 2 / 4 / 4").addClass(tipoanimacao)
    } else {
      sidebar_page.addClass(tipoanimacao2)
      content.removeClass(tipoanimacao).css("grid-area", "2 / 1 / 3 / 3")
      footer.removeClass(tipoanimacao).css("grid-area", "3 / 1 / 4 / 4")
      sidebar_page.css("display", "none")

    }

  });
});

i wonder if it has how to make it first run the animation, and only after the animation the display stay 'None', I’ve tried with if, but it did not work.

Another problem I’m also having with animation, is my footer and the content, when the sidebar display gets grid, I’m changing the beginning of the position column from 1 to 2 to make an animation slide, and the sidebar get in column 1

grid:

content.css("grid-area", "2 / 2 / 3 / 3").addClass(tipoanimacao)
footer.css("grid-area", "3 / 2 / 4 / 4").addClass(tipoanimacao)

None:

content.removeClass(tipoanimacao).css("grid-area", "2 / 1 / 3 / 3")
      footer.removeClass(tipoanimacao).css("grid-area", "3 / 1 / 4 / 4")

is working, but when it’s time for him to do the animation to go back to column 2, the footer and the content get smaller, because instead of them taking the 3 columns of the whole page they only take two, and when the slide effect starts the right side of the page is blank, then I would like to know if there is any animation happening only after the column value is changed

this is the CSS excerpt from how I divided the page into 3 parts

.all-page-content {
    min-height: 100%;
    display: grid;
    grid-template-rows: 3em auto 3em;
    grid-template-columns: 10em auto 2em; }

and the animation that I created, I’m not using Animate.css because there is none like it I want

.testess {
  animation-name: teste;
  animation-duration: 0.8s;
  animation-fill-mode: both; }

@keyframes teste {
  0% {
    transform: translateX(-100px); }
  99% {
    transform: translateX(0px); } }
@keyframes teste2 {
  0% {
    transform: translateX(0px); }
  99% {
    transform: translateX(-155px); } }

HTML

<section class="all-page-content">

  <header>

    <div class="sidebar-toggle-box ">
      <i class="fas fa-bars"></i>
    </div>

    <div class="medium-column-header">

      <div class="search">
        <input type="search" name="search" value="" placeholder="Pesquisar"/>

        <button type="button" name="button"><i class="fas fa-search"></i></button>
      </div>
    </div>

    <div class="black-row"></div>

  </header>

  <aside class="sidebar-page">
    <nav>
      <ul>
        <li><a href="#"> <div class=""><i class="fas fa-cogs"></i><p>loremsd</p></div></a>
          <ul>
            <li> <a href="#"> <div class="">dfdfd</div> </a></li>
            <li> <a href="#"> <div class="">dfdfd</div> </a></li>
            <li> <a href="#"> <div class="">dfdfd</div> </a></li>
          </ul>
        </li>
        <li><a href="#"> <div class=""><i class="fab fa-btc"></i><p>lorisd</p></div> </a>
          <ul>
            <li> <a href="#"> <div class="">dfdfd</div> </a></li>
            <li> <a href="#"> <div class="">dfdfd</div> </a></li>
            <li> <a href="#"> <div class="">dfdfd</div> </a></li>
          </ul>
        </li>
        <li><a href="#"> <div class=""><i class="fas fa-bell"></i><p>losari</p></div> </a></li>
        <li><a href="#"> <div class=""><i class="fas fa-chart-line"></i><p>loresa</p></div> </a></li>
      </ul>
    </nav>
  </aside>

  <aside class="right-sidebar">
    <address class="">
      <ul>
        <li><a href="#"><i class="fab fa-instagram"></i></a></li>
        <li><a href="#"><i class="fab fa-twitch"></i></a></li>
        <li><a href="#"><i class="fab fa-youtube"></i></a></li>
        <li><a href="#"><i class="fab fa-whatsapp"></i></a></li>
      </ul>
    </address>
  </aside>

  <section class="content">
    <article class="">
      <div class="tittle">
       <h6>Lorem ipsum dolor sit amet, est laborum.</h6>
      </div>

      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

      <aside class="">
        <h6>Author: Giovani Lopes</h6>
        <data value="24/11/2022">24/11/1996</data>
      </aside>
    </article>

    <article class="">
      <div class="tittle">
        <h6>sunt in culpa qui officia deserunt mollit anim id est laborum.</h6>
      </div>

      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </article>
  </section>

  <footer class="footer">
    <div class="">
      <p>Copyright (c) 2018 Copyright Holder All Rights Reserved.</p>
    </div>
  </footer>

</section>

CSS Complete:

    * {
      margin: 0;
      padding: 0;
      text-decoration: none;
      list-style: none;
      box-sizing: border-box;
      color: black;
      outline: none; }

    html, body {
      height: 100%; }
      html .all-page-content, body .all-page-content {
        min-height: 100%;
        display: grid;
        grid-template-rows: 3em auto 3em;
        grid-template-columns: 10em auto 2em; }

    input[type="search"]::-webkit-search-decoration,
    input[type="search"]::-webkit-search-cancel-button,
    input[type="search"]::-webkit-search-results-button,
    input[type="search"]::-webkit-search-results-decoration {
      display: none; }

    input[type=search]::-ms-clear {
      display: none;
      width: 0;
      height: 0; }

    input[type=search]::-ms-reveal {
      display: none;
      width: 0;
      height: 0; }

header {
  grid-area: 1 / 1 / 2 / 4;
  background-color: #013243;
  display: grid;
  grid-template-columns: 1.5em auto 1.5em;
  grid-template-rows: auto 0.1em;
  align-items: center; }
  header .black-row {
    grid-area: 2 / 1 / 3 / 4;
    width: 100%;
    background-color: #012734;
    height: 0.1em; }
  header .sidebar-toggle-box {
    margin-left: 5px;
    grid-area: 1 / 1 / 2 / 2;
    cursor: pointer;
    border-radius: 2.4px;
    width: 1.8em;
    height: 1.6em;
    display: flex;
    justify-content: center;
    align-items: center; }
    header .sidebar-toggle-box > i {
      color: #fff; }
  header .sidebar-toggle-box:hover {
    background: #012c3a; }
  header .medium-column-header {
    grid-area: 1 / 2 / 2 / 3;
    display: flex;
    justify-content: flex-end; }
    header .medium-column-header .search {
      display: flex;
      align-items: center;
      height: 1.8em;
      background-color: #012c3a;
      padding: 8px;
      border-radius: 5px; }
      header .medium-column-header .search ::-webkit-input-placeholder {
        color: rgba(255, 255, 255, 0.5); }
      header .medium-column-header .search :-moz-placeholder {
        color: rgba(255, 255, 255, 0.5); }
      header .medium-column-header .search ::-moz-placeholder {
        color: rgba(255, 255, 255, 0.5); }
      header .medium-column-header .search :-ms-input-placeholder {
        color: rgba(255, 255, 255, 0.5); }
      header .medium-column-header .search > input {
        background: none;
        border: none;
        width: 10em;
        height: 1.6em;
        color: rgba(255, 255, 255, 0.7); }
      header .medium-column-header .search > button {
        cursor: pointer;
        border: none;
        background: none; }
        header .medium-column-header .search > button i {
          font-size: 11px;
          color: #FDE3A7; }

.sidebar-page {
  grid-area: 2 / 1 / 4 / 2;
  width: 10em;
  background-color: #FDE3A7;
  padding: 10px 5px 0px 10px;
  overflow: visible;
  display: grid; }
  .sidebar-page > nav > ul > li > ul {
    display: none; }
  .sidebar-page nav > ul > li:hover > ul {
    display: grid;
    grid-template-columns: 1.8em auto;
    align-items: center; }
    .sidebar-page nav > ul > li:hover > ul > li {
      grid-column: 2/3; }
      .sidebar-page nav > ul > li:hover > ul > li:hover > a > div {
        background-color: #fcdb8e; }
      .sidebar-page nav > ul > li:hover > ul > li > a > div {
        padding: 0.25em;
        padding-left: 0.8em; }
  .sidebar-page nav > ul > li > a > div {
    height: 2.2em;
    padding: 5px;
    border-radius: 3px;
    align-items: center;
    display: grid;
    grid-template-columns: 1.7em auto; }
    .sidebar-page nav > ul > li > a > div > i {
      grid-column: 1/2; }
    .sidebar-page nav > ul > li > a > div p {
      grid-column: 2/3; }
  .sidebar-page nav > ul > li > a > div:hover {
    background-color: #fcdb8e; }

.sidebar-page::after {
  content: '';
  height: 37.5em;
  background: #fcd375;
  width: 0.1em;
  display: block;
  margin-left: 9.2em;
  margin-top: -9.4em; }

.right-sidebar {
  grid-area: 2 / 3 / 3 / 4;
  display: flex;
  align-items: center;
  justify-content: center; }

.content {
  -webkit-animation-duration: 3s;
  grid-area: 2 / 2 / 3 / 3;
  padding: 20px; }

.footer {
  grid-area: 3 / 2 / 4 / 4;
  transition: grid-area 50s linear;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #013243; }

/*# sourceMappingURL=main.css.map */