JS Flashcards: Flipping Cards Part 1

This article was originally posted on mccarville.dev

When I set out to develop a project that uses flash cards, it was obvious that it would be essential to have cards that would flip when you click on them. I had not worked much with animations other than some transitions and hover effects, so I was going to have to do some googling and find some examples of how I could build my cards.

I will be breaking down the article into two parts that will address the obstacles that I came across at each step. Part 1 will cover how I went about building the cards and getting them to flip using Vue. In Part 2, I will cover how I put the content in the cards and some of the issues I had to work around.

Building a Flipping card

The first step was to find some examples of some card flipping and then translate that to use in Vue. This actually ended up taking more time and being harder than I had anticipated. I found a lot of codepens and some Vue plugins that had flipping cards, but many of the examples weren't exactly what I was looking for. Some of the implementations just didn't work for how I wanted to build my cards and I was having a difficult time wrapping my head around how I was going to put the cards together. After lots of searching, I came across a great article by David Desandro called "Intro to CSS 3D Animations." His description of how to build the card clicked in a way that none of the other articles that I read had. It just made sense and I could see a path for implementing the card in Vue. I'm going to put the beginning of the article here, but I would highly recommend that you check out David's full article.

Card structure - excerpt from David's article

"Here’s the basic markup we’ll need:

<div class="scene">
  <div class="card">
    <div class="card__face card__face--front">front</div>
    <div class="card__face card__face--back">back</div>
  </div>
</div>

The .scene will house the 3D space. The .card acts as the 3D object. Two separate .card__face elements are used for the faces of the card. I recommend using this same pattern for any 3D transform: scene, object, and faces. Keeping the 3D space element and the object element separate establishes a paradigm that is simple to understand and easier to style."

Check out the rest of the article to see how he styles the card. Here is his codepen of the card in action.

Implementing the flipping card in Vue.js

In the first example, David used vanilla JS to get the card to flip. He selected the .card element with document.querySelector() and then added an event listener that implemented a class toggle on click. I did something very similar, but using Vue. Take a look at the code below and I'll walk you through my implementation.

(you can drag the white bar on the left to shrink the preview and see the code)

1. line 21 - I added the data property cardOne and set the value to "start".

2. line 6 - I added a click listener on .card that toggles the data property cardOne. It uses a ternary operator to determine what cardOne is set to and then changes it, either to "flipped" or back to "start".

3. line 7 - I pass the object {flipme: cardOne == 'flipped'} to v-bind:class to dynamically toggle classes. When cardOne == 'flipped', the flipme class (line 71) will be applied to .card.

And there you have it, a flipping card implemented in Vue.js. If you haven't had a chance to check out JS Flashcards, you can find the project here.

Next up in Part 2, I will be covering how I went about putting content in the cards and how I got multiple cards to work together.

** I hope everyone is staying safe as we deal with COVID-19. My best wishes to everyone during this time and I hope you and yours are doing well.