CODEWITHSUNDEEP
javascripthtmljquerycss
Kenken
Kenken

Reputation: 197

Fade-out Left & Fade-in Right animation with jQuery

This is a questionnaire to help people where should they go when they have a certain type of ticket.

Right now everything is going OK but I need to put a smooth animation on each ul transition.

So, if you pressed any button, the old ul is gonna fade-out to the left and the new ul will fade-in from the right. But if you press the Back button it will do the opposite animation when going back to the previous ul.

Right now I'm only using animation from https://animate.style/. Is there anyway to control the animation with jQuery or is it better to build the animation with jQuery alone ?

$(document).ready(function() {
  $(".tab a").click(function() {
    $(this).parent().addClass("active").siblings(".active").removeClass("active");
    var tabContents = $(this).attr("href");
    $(tabContents).addClass("active").siblings(".active").removeClass("active");
    return false;

    setTimeout(function() {
      q_list.eq(num).addClass("left");
      setTimeout(function() {
        q_list.eq(num).hide();
        q_list.eq(num + 1).show();
        btn.removeClass("click");
        setTimeout(function() {
          q_list.eq(num + 1).removeClass("right");
          num++
        }, 1000);
      }, 360);
    }, 260);
  });

  $("button").on("click", function() {
    let currentLevel = $(this).closest('.tab').attr('data-level');
    let prevLevel = parseInt(currentLevel) - 1;
    $('.tab').removeClass("active");
    $(`.tab[data-level=${prevLevel}]`).eq(0).addClass('active')
  });
});
.question_wrapper {
  display: flex;
  justify-content: center;
}

ul {
  list-style: none;
  border: 1px solid black;
  text-align: center;
  padding-left: 0;
  width: 40rem;
  height: 20rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.buttons {
  display: flex;
  justify-content: space-around;
}

.yes_part,
.no_part {
  display: flex;
  flex-direction: column;
}

.yes_part {
  padding-right: 2rem;
}

a.yes {
  background-color: #FFB8B8;
  padding: 5px 20px;
  text-decoration: none;
  color: black;
  margin-top: 5px;
}

a.no {
  background-color: #B1E0FF;
  padding: 5px 20px;
  text-decoration: none;
  color: black;
  margin-top: 5px;
}

.ticket_type {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  padding-bottom: 10px;
}

.ticket_type a {
  padding: 10px 30px;
  border: 1px solid black;
  border-radius: 10px;
  margin: 10px;
}

.answer_1 {
  display: flex;
  flex-direction: column;
}

.store_place_1,
.store_place_2 {
  display: flex;
}

.store_1,
.store_2,
.store_3,
.store_4,
.store_5 {
  text-decoration: none;
  color: black;
}

a {
  text-decoration: none;
  color: black;
}

.tab {
  display: none;
}

.tab.active {
  display: flex;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />

<section class="question_wrapper">
  <ul class="tab main-tab active animate__animated animate__fadeInRight" data-level='1'>
    <li class="active">
      <p>Do you have a ticket ?</p>
      <div class="buttons">
        <div class="yes_part">
          <img src="yes.png" alt="">
          <a class="yes" href="#tab1">yes</a>
        </div>
        <div class="no_part">
          <img src="no.png" alt="">
          <a class="no" href="#tab2">no</a>
        </div>
      </div>
    </li>
  </ul>
  <ul class="tab animate__animated animate__fadeInRight" id="tab1" data-level='2'>
    <li>
      <p>Which Ticket do you have ?</p>
      <div class="ticket_type">
        <a href="#tab3">Type 1</a>
        <a href="#tab3">Type 2</a>
        <a href="#tab3">Type 3</a>
        <a href="#tab4">Type 4</a>
        <a href="#tab4">Type 5</a>
        <a href="#tab5">Type 6</a>
      </div>
      <button type="button">Back</button>
    </li>
  </ul>
  <ul class="tab animate__animated animate__fadeInRight" id="tab2" data-level='2'>
    <li>
      <p>You can buy the ticket from here.</p>
      <div class="store_place_1">
        <a href="#">
          <div class="store_1">
            <p>Store 1</p>
            <img src="" alt="">
            <p>You need to login first to buy</p>
          </div>
        </a>
        <a href="#">
          <div class="store_2">
            <p>Store 2</p>
            <img src="" alt="">
            <p>You need to login first to buy</p>
          </div>
        </a>
        <a href="#">
          <div class="store_3">
            <p>Store 3</p>
            <img src="" alt="">
            <p>You need to login first to buy</p>
          </div>
        </a>
      </div>
      <div class="store_place_2">
        <a href="#">
          <div class="store_4">
            <p>Store 4</p>
            <img src="" alt="">
            <p>You need to login first to buy</p>
          </div>
        </a>
        <a href="#">
          <div class="store_5">
            <p>Store 5</p>
            <img src="" alt="">
            <p>You need to login first to buy</p>
          </div>
        </a>
      </div>
      <button>Back</button>
    </li>
  </ul>
  <ul class="tab animate__animated animate__fadeInRight" id="tab3" data-level='3'>
    <li>
      <div class="answer_1">
        <p>Please go to hall A</p>
        <img src="receptionist.png" alt="">
        <button>Back</button>
      </div>
    </li>
  </ul>
  <ul class="tab animate__animated animate__fadeInRight" id="tab4" data-level='3'>
    <li>
      <p>Please go to hall B</p>
      <button>Back</button>
    </li>
  </ul>
  <ul class="tab animate__animated animate__fadeInRight" id="tab5" data-level='3'>
    <li>
      <p>Please go to hall C</p>
      <button>Back</button>
    </li>
  </ul>
</section>

Upvotes: 1

Views: 1610

Answers (1)

Kinglish
Kinglish

Reputation: 23654

Here is a working version using Animate.css, and it's configurable to have any set of { Current->in, Current->out, Next->in and Next->out } transitions by editing the trans Object. You can also set the speed fast or '' (default). The way it works is:

  • on page init, the default transitions are applied to all animated elements (default is the trans.nextIn class)
  • on page init, the speed configuration class is applied to all animated elements
  • on any 'forward' transition (a click) the current element is given the nextOut transition and a timeout is set. When the timeout is done, the target tab is given its 'active' + nextIn transition class
  • on any 'back' transition, the reverse happens.

The code is commented.

let trans = {
  nextIn: 'animate__fadeInLeft',
  nextOut: 'animate__fadeOutRight',
  prevIn: 'animate__fadeInRight',
  prevOut: 'animate__fadeOutLeft'
};
let transArr = Object.entries(trans).map(e => e[1]);
let aDelay, speed = 'fast' // fast or slow 

$(document).ready(function() {
  // first set up the animations based on our configuration stuff above
  $('.animate__animated').addClass(trans.nextIn) // auto-apply the default IN transition
  if (speed === 'fast') {
    aDelay = 200;
    $('.animate__animated').addClass('animate__faster')
  } else aDelay = 300;

  $(".tab a").click(function() {
    $('.tab').removeClass(transArr); // remove all transition classes from tabs 
    $(`.tab.active`).addClass(trans.nextOut)
    var tabContents = $(this).attr("href");
    $(tabContents).removeClass(transArr)
    setTimeout(() => { // the timeout allows our departing containers a moment to get out before we bring in the next active container
      $(`.tab.active`).removeClass('active')
      $(tabContents).addClass([trans.nextIn, "active"])
    }, aDelay)
  });

  $("button").on("click", function() {
    let currentLevel = $(this).closest('.tab').attr('data-level');
    let prevLevel = parseInt(currentLevel) - 1;
    $('.tab').removeClass(transArr); // remove all transition classes from tabs
    $(`.tab.active`).addClass(trans.prevOut);
    setTimeout(() => { // the timeout allows our departing containers a moment to get out before we bring in the next active container
      $('.tab').removeClass('active')
      let targTab = `.tab[data-level=${prevLevel}]`;
      $(targTab).eq(0).addClass('active ' + trans.prevIn);
    }, aDelay)
  });
});
.question_wrapper {
  display: flex;
  justify-content: center;
}

ul {
  list-style: none;
  border: 1px solid black;
  text-align: center;
  padding-left: 0;
  width: 40rem;
  height: 20rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.buttons {
  display: flex;
  justify-content: space-around;
}

.yes_part,
.no_part {
  display: flex;
  flex-direction: column;
}

.yes_part {
  padding-right: 2rem;
}

a.yes {
  background-color: #FFB8B8;
  padding: 5px 20px;
  text-decoration: none;
  color: black;
  margin-top: 5px;
}

a.no {
  background-color: #B1E0FF;
  padding: 5px 20px;
  text-decoration: none;
  color: black;
  margin-top: 5px;
}

.ticket_type {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  padding-bottom: 10px;
}

.ticket_type a {
  padding: 10px 30px;
  border: 1px solid black;
  border-radius: 10px;
  margin: 10px;
}

.answer_1 {
  display: flex;
  flex-direction: column;
}

.store_place_1,
.store_place_2 {
  display: flex;
}

.store_1,
.store_2,
.store_3,
.store_4,
.store_5 {
  text-decoration: none;
  color: black;
}

a {
  text-decoration: none;
  color: black;
}

.tab {
  display: none;
}

.tab.active {
  display: flex;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
<section class="question_wrapper">
  <ul class="tab main-tab active animate__animated " data-level='1'>
    <li class="active">
      <p>Do you have a ticket ?</p>
      <div class="buttons">
        <div class="yes_part">
          <img src="yes.png" alt="">
          <a class="yes" href="#tab1">yes</a>
        </div>
        <div class="no_part">
          <img src="no.png" alt="">
          <a class="no" href="#tab2">no</a>
        </div>
      </div>
    </li>
  </ul>
  <ul class="tab animate__animated " id="tab1" data-level='2'>
    <li>
      <p>Which Ticket do you have ?</p>
      <div class="ticket_type">
        <a href="#tab3">Type 1</a>
        <a href="#tab3">Type 2</a>
        <a href="#tab3">Type 3</a>
        <a href="#tab4">Type 4</a>
        <a href="#tab4">Type 5</a>
        <a href="#tab5">Type 6</a>
      </div>
      <button type="button">Back</button>
    </li>
  </ul>
  <ul class="tab animate__animated " id="tab2" data-level='2'>
    <li>
      <p>You can buy the ticket from here.</p>
      <div class="store_place_1">
        <a href="#">
          <div class="store_1">
            <p>Store 1</p>
            <img src="" alt="">
            <p>You need to login first to buy</p>
          </div>
        </a>
        <a href="#">
          <div class="store_2">
            <p>Store 2</p>
            <img src="" alt="">
            <p>You need to login first to buy</p>
          </div>
        </a>
        <a href="#">
          <div class="store_3">
            <p>Store 3</p>
            <img src="" alt="">
            <p>You need to login first to buy</p>
          </div>
        </a>
      </div>
      <div class="store_place_2">
        <a href="#">
          <div class="store_4">
            <p>Store 4</p>
            <img src="" alt="">
            <p>You need to login first to buy</p>
          </div>
        </a>
        <a href="#">
          <div class="store_5">
            <p>Store 5</p>
            <img src="" alt="">
            <p>You need to login first to buy</p>
          </div>
        </a>
      </div>
      <button data-back>Back</button>
    </li>
  </ul>
  <ul class="tab animate__animated " id="tab3" data-level='3'>
    <li>
      <div class="answer_1">
        <p>Please go to hall A</p>
        <img src="receptionist.png" alt="">
        <button data-back>Back</button>
      </div>
    </li>
  </ul>
  <ul class="tab animate__animated " id="tab4" data-level='3'>
    <li>
      <p>Please go to hall B</p>
      <button data-back>Back</button>
    </li>
  </ul>
  <ul class="tab animate__animated " id="tab5" data-level='3'>
    <li>
      <p>Please go to hall C</p>
      <button data-back>Back</button>
    </li>
  </ul>
</section>

Upvotes: 1

Related Questions