Is there anything like jquery command priority?

I'm creating a page, and this page has a side menu, and on the sidebar has a menu icon, which when clicked makes the bar appear and disappear, to disappear I'm using "display - none" and to show "grid", why I'm using "grid layout" to stylize, the problem I'm having is when creating the animations, when it is for the menu to appear, the animation works, to disappear, no, I think it is because I'm using "display - none" and then it does not do 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 would like to know if it has to do the animation first, and only after the animation the display is 'none', I already tried with if, but it did not work.

Another problem I'm also having with animation, is my footer and content, when the sidebar display gets grid, I'm changing the start of the position column from 1 to 2 to do a slide animation, and the sidebar stay 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")

It's working, but when it's time for the animation to go back to column 2, the footer and content are smaller, because instead of taking the 3 columns of the entire page they take only two, and when the slide effect starts the right side of the page is blank, so I'd like to know if you have how the animation happens only after the column value is changed

This is the CSS snippet of how I split 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 I created, I'm not using animate.css because it does not have any equal 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>

Full CSS:

    * {
      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 */