I found myself trying to figure out how to do an interface consisting of a series of cards that slide off to the side as you finish them. Let’s start by looking at the sample app before the addition of the sliding magic.
See the Pen
Vue.js / Bulma Slide Transitions: Part 1 by Joe Steinbring (@steinbring)
on CodePen.
As you can see above, there are six card, a step variable that controls which one is visible, and Next / Previous buttons change the value of the variable. Next, let’s try adding Vue transitions and a little CSS transitions fanciness.
See the Pen
Vue.js / Bulma Slide Transitions: Part 2 by Joe Steinbring (@steinbring)
on CodePen.
So, now as you click Next / Previous, there is a little bit of a visual swipe animation. It isn’t clear where the user is in the process with this, so let’s add a progress bar, next.
See the Pen
Vue.js / Bulma Slide Transitions: Part 3 by Joe Steinbring (@steinbring)
on CodePen.
That feels a little more complete. So, we have been doing swipe animations so far. What would it take to add the ability to swipe things from side to side using your actual finger? Let’s start with a little bit of a proof of concept.
See the Pen
Detect left and right swipes on touch devices by Joe Steinbring (@steinbring)
on CodePen.
In the above pen, as you swipe your finger across the red square, it says what you are doing on the screen. Now, let’s try to integrate this into the carousel interface.
See the Pen
Vue.js / Bulma Slide Transitions: Part 3 by Joe Steinbring (@steinbring)
on CodePen.
That generally seems to work. To be honest, I’m not a huge fan of this end-result, though. I think that it can (and should) be better.
Have any suggestions? Know of some library that I missed? Please, feel free to drop a comment, below.