Mastering the art of transitioning between DIV elements

Question

Mastering the art of transitioning between DIV elements

I am looking to implement a rotating three-card display on click, and have come up with the following code:

$('.box1').click(function(){
    $('.box1').toggleClass('removeanimate');
    $(this).toggleClass('go');
    $('.box2').removeClass('go');
});

$('.box2').click(function(){
    $(this).toggleClass('go');
    $('.box3').removeClass('go')
});

$('.box3').click(function(){
    $(this).toggleClass('go');
    $('.box1').toggleClass('go');
    $('.box2').toggleClass('go');
});

.wrapper{
    position:static;
}

.box{
    width:200px;
    height:100px;
    position:absolute;
    margin:5px;
    cursor:pointer;
    overflow:hidden;
    text-align: center;
    line-height: 100px;
}

.box1 {
    z-index:2;
}
.box2{
    z-index:1;
}
.box3{
    z-index:0;
}

.go{
    height:0;
    width:0;
}

.box:nth-child(1) {
    background: green;
}
.box:nth-child(2) {
    background: red;
}
.box:nth-child(3) {
    background: orange;
}
.removeanimate: {
  transform: scale(0.7);
  transform-origin: left;
  background-color: pink;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
    <div class="box box1"><h2>I'm block 1</h2></div>
    <div class="box box2"><h2>I'm block 2</h2></div>
    <div class="box box3"><h2>I'm block 3</h2></div>
</div>

Now, I have the following questions regarding this implementation:

1- It seems that the animation between cards using .removeanimate is not working properly. How can this be resolved?

2- I am concerned about scalability in the script part. Adding more boxes manually for the onclick function is not ideal. Is there a better way to handle this without disrupting the rotation behavior?

javascript html jquery css

Answer 1

Answer №1

1 - When using keyframes, ensure to set up the animation in your keyframes CSS rule and then specify the name of your keyframes animation within a class with the `animation-name` property.

Learn more about CSS3 animations here.

2 - My recommendation is to iterate through elements with the "card" class and add class names and z-index using `each()` + index.

For handling click events, extract the digit from the class name (e.g., box0) using regex, retrieve the next element's digit (e.g., box1), apply the keyframes animation class, hide the current box, and display the next one.

I have provided detailed comments throughout my code.

// Count all boxes
var getNumberOfBox = $(".box").length;

// Initialize boxes
initBox(getNumberOfBox);

// Handle click event on box
$(".box").click(function() {
    // Check if current box is animated
    if (!$(this).is(':animated')) {
      // Check if next box exists
      if ($(this).next("div.box:first").length) {
        // Get digit from class name (e.g., box1)
        var boxNum = $(this).attr('class').match(/\d+$/)[0];
        // Get digit of next card
        var getNextBoxNum = $(this).next("div.box:first").attr('class').match(/\d+$/)[0];

        // Ensure variables are defined
        if (typeof boxNum !== "undefined" && typeof getNextBoxNum !== "undefined") {
          // Add keyframes animation class and fadeOut current box
          $(".box" + boxNum).addClass("removeanimate").fadeOut(700, function() {
            // Remove keyframes class name
            $(".box" + boxNum).removeClass("removeanimate");
            // Show next card
            $(".box" + getNextBoxNum).fadeIn();
          });
        }
      } else {
        // Restart the loop
        $(".box:visible").fadeOut(250, function() {
          $(".box:first").fadeIn(250, function() {
            $(".box").removeClass("removeanimate").css("display", "block");
          });
        });
      }
    }
});

function initBox(boxCount) {
  // Iterate through all elements with "box" class
  $(".box").each(function(index) {
    // Add class name and z-index using each() and element index
    $(this).addClass("box" + index).css("z-index", boxCount - index);
  });
}

.wrapper{
    position: static;
}

.box{
    background: #333;
    width: 200px;
    height: 100px;
    position: absolute;
    margin: 5px;
    cursor: pointer;
    overflow: hidden;
    text-align: center;
    line-height: 100px;
}

.box:nth-child(1) {
    background: green;
}
.box:nth-child(2) {
    background: red;
}
.box:nth-child(3) {
    background: orange;
}
.box:nth-child(4) {
    background: purple;
}
.box:nth-child(5) {
    background: teal;
}


/* Add keyframes name to a class with "animation-name" for animation */
.removeanimate {
  animation-duration: 1s;
  animation-name: scaleAnim;
}

/* Set custom animation */
@keyframes scaleAnim {
  to {  
    transform: scale(0.7);
    transform-origin: left;
    background-color: pink;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
    <div class="box"><h2>I'm block 1</h2></div>
    <div class="box"><h2>I'm block 2</h2></div>
    <div class="box"><h2>I'm block 3</h2></div>
    <div class="box"><h2>I'm block 4</h2></div>
    <div class="box"><h2>I'm block 5</h2></div>
</div>

Answer 2

1 - When using keyframes, ensure to set up the animation in your keyframes CSS rule and then specify the name of your keyframes animation within a class with the `animation-name` property.

Learn more about CSS3 animations here.

2 - My recommendation is to iterate through elements with the "card" class and add class names and z-index using `each()` + index.

For handling click events, extract the digit from the class name (e.g., box0) using regex, retrieve the next element's digit (e.g., box1), apply the keyframes animation class, hide the current box, and display the next one.

I have provided detailed comments throughout my code.

// Count all boxes
var getNumberOfBox = $(".box").length;

// Initialize boxes
initBox(getNumberOfBox);

// Handle click event on box
$(".box").click(function() {
    // Check if current box is animated
    if (!$(this).is(':animated')) {
      // Check if next box exists
      if ($(this).next("div.box:first").length) {
        // Get digit from class name (e.g., box1)
        var boxNum = $(this).attr('class').match(/\d+$/)[0];
        // Get digit of next card
        var getNextBoxNum = $(this).next("div.box:first").attr('class').match(/\d+$/)[0];

        // Ensure variables are defined
        if (typeof boxNum !== "undefined" && typeof getNextBoxNum !== "undefined") {
          // Add keyframes animation class and fadeOut current box
          $(".box" + boxNum).addClass("removeanimate").fadeOut(700, function() {
            // Remove keyframes class name
            $(".box" + boxNum).removeClass("removeanimate");
            // Show next card
            $(".box" + getNextBoxNum).fadeIn();
          });
        }
      } else {
        // Restart the loop
        $(".box:visible").fadeOut(250, function() {
          $(".box:first").fadeIn(250, function() {
            $(".box").removeClass("removeanimate").css("display", "block");
          });
        });
      }
    }
});

function initBox(boxCount) {
  // Iterate through all elements with "box" class
  $(".box").each(function(index) {
    // Add class name and z-index using each() and element index
    $(this).addClass("box" + index).css("z-index", boxCount - index);
  });
}

.wrapper{
    position: static;
}

.box{
    background: #333;
    width: 200px;
    height: 100px;
    position: absolute;
    margin: 5px;
    cursor: pointer;
    overflow: hidden;
    text-align: center;
    line-height: 100px;
}

.box:nth-child(1) {
    background: green;
}
.box:nth-child(2) {
    background: red;
}
.box:nth-child(3) {
    background: orange;
}
.box:nth-child(4) {
    background: purple;
}
.box:nth-child(5) {
    background: teal;
}


/* Add keyframes name to a class with "animation-name" for animation */
.removeanimate {
  animation-duration: 1s;
  animation-name: scaleAnim;
}

/* Set custom animation */
@keyframes scaleAnim {
  to {  
    transform: scale(0.7);
    transform-origin: left;
    background-color: pink;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
    <div class="box"><h2>I'm block 1</h2></div>
    <div class="box"><h2>I'm block 2</h2></div>
    <div class="box"><h2>I'm block 3</h2></div>
    <div class="box"><h2>I'm block 4</h2></div>
    <div class="box"><h2>I'm block 5</h2></div>
</div>

Mastering the art of transitioning between DIV elements

Answer №1

Similar questions

Trouble accessing state when React child calls parent method

Having issues with the onSubmit event not being triggered for a react + material-ui form

What could be causing the issue of React not showing the messages of "hello" or "goodbye"?

Tips for creating a clickable A href link in the menu bar that triggers an accordion to open in the body when clicked - html

Determine the type and size of files prior to uploading

How can I extract the return value of a JSON object and store it in a variable?

Tips on how to showcase a picture with the focus on the center by enlarging it within

Find similarities between two JavaScript arrays using unique identifiers

What is causing me to repeatedly encounter the 403 forbidden error?

Issue: The module could not be located within the project or in any of the directories, including node_modules

Aligning an element in the middle of an image vertically

Modify CSS class if user is using Internet Explorer version 10 or above

I possess an array containing objects of different lengths depending on the chosen city. How can I pinpoint the element that contains an object with a specific property?

Disable a href link using Jquery after it has been clicked, then re-enable it after a

How to Override package.json Scripts in NPM

Hosting services and content management system for a website built with Twitter Bootstrap

How is it possible to access a variable in a function that hasn't been declared until later?

Change the right border style for the second and third ToggleButtons in the ToggleButtonGroup

What sets the target property of the mousewheel event apart from other events like click, mousedown, and touchstart?

Encountering cross-domain error when attempting Google Maps API GET request