3
\$\begingroup\$

I've made a card flip with CSS keyframes but instead of flipping clockwise and then flip counterclockwise to it's original position, I've two separate keyframes that will cause it to rotate in the same direction each time I rotate.

I have jQuery checking if either class exists and adding the first one if neither exists and then I toggle the classes to keep this effect going indefinitely.

Is there a better way of writing this CSS to condense this into one class and have JavaScript just toggle that one class instead of two? If not, is there a better approach to handling the JavaScript?

$(".click").click(function () {
    $flipper = $(".flipper");
    
    if (!$flipper.hasClass("flipped") && !$flipper.hasClass("second-flip")) {
        $flipper.addClass("flipped");
    } else {
        $flipper.toggleClass("flipped");
        $flipper.toggleClass("second-flip");
    }
});
.flip-container {
    height: 150px;
    width: 150px;
    
    perspective: 600;
    position: relative;
}
.flipper {
    height: 100%;
    width: 100%;
    
    position: absolute;
    transform-style: preserve-3d;
    transition: transform 1s;
}
.back, .front {
    height: 100%;
    width: 100%;
    
    display: block;
    position: absolute;
    backface-visibility: hidden;
}
.front {
    background-color: red;
}
.back {
    background-color: blue;
    transform: rotateY(180deg);
}
.flipped {
    animation: spin180 1s 1 forwards;
}
.second-flip {
    animation: spin360 1s 1 forwards;
}

@keyframes spin180 {
    0% { transform: rotateY(0deg); }
    100% { transform: rotateY(180deg); }
}

@keyframes spin360 {
    0% { transform: rotateY(180deg); }
    100% { transform: rotateY(360deg); }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="flip-container">
  	  <div class="flipper">
        <div class="face front">
            <p>Front</p>
        </div>
        <div class="face back">
            <p>Back</p>
        </div>
    </div>
</div>

<button class="click">Click me</button>

\$\endgroup\$
3
\$\begingroup\$

jQuery's .toggleClass() function allows you to determine the class name to be toggled by passing a function as the first argument:

$(".click").click(function() {
  $(".flipper").toggleClass(function() {
    if ($(this).is(".flipped")) {
      return "second-flip";
    } else {
      return "flipped";
    }
  });
});

Making your Javascript code cleaner and more usable. :)

$(".click").click(function() {
  $(".flipper").toggleClass(function() {
    if ($(this).is(".flipped")) {
      return "second-flip";
    } else {
      return "flipped";
    }
  });
});
.flip-container {
  height: 150px;
  width: 150px;
  perspective: 600;
  position: relative;
}
.flipper {
  height: 100%;
  width: 100%;
  position: absolute;
  transform-style: preserve-3d;
  transition: transform 1s;
}
.back,
.front {
  height: 100%;
  width: 100%;
  display: block;
  position: absolute;
  backface-visibility: hidden;
}
.front {
  background-color: red;
}
.back {
  background-color: blue;
  transform: rotateY(180deg);
}
.flipped {
  animation: spin180 1s 1 forwards;
}
.second-flip {
  animation: spin360 1s 1 forwards;
}
@keyframes spin180 {
  from {
    transform: rotateY(0deg);
  }
  to {
    transform: rotateY(180deg);
  }
}
@keyframes spin360 {
  from {
    transform: rotateY(180deg);
  }
  to {
    transform: rotateY(360deg);
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="flip-container">
  <div class="flipper">
    <div class="face front">
      <p>Front</p>
    </div>
    <div class="face back">
      <p>Back</p>
    </div>
  </div>
</div>

<button class="click">Click me</button>

\$\endgroup\$
  • 1
    \$\begingroup\$ Oh this is definitely an improvement to the Javascript and it still works with both classes in the element, so I'm sold. Do you have any suggestions on the CSS? \$\endgroup\$ – allejo Jan 19 '16 at 23:41
  • \$\begingroup\$ @allejo, your CSS code looks fine to me. :) \$\endgroup\$ – Luke Jan 20 '16 at 21:37

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.