How to create sliding left effect using Vuejs animation

Creating a left-sliding animation effect in Vue.js typically involves leveraging Vue's transition system in combination with CSS animations or JavaScript hooks. The following outlines basic implementation steps and examples:

Step 1: Define the HTML Structure

First, define the element in the Vue template that will be animated.

html
<template>
  <div id="app">
    <button @click="show = !show">Toggle Slide</button>
    <transition name="slide-left">
      <div v-if="show" class="box">Slide Me!</div>
    </transition>
  </div>
</template>

Step 2: Add CSS Animations

In the above code, we wrap the element to be animated with <transition name="slide-left">. The name="slide-left" attribute serves as an identifier linking to the CSS animations defined.

css
<style>
.slide-left-enter-active, .slide-left-leave-active {
  transition: transform 0.5s ease;
}
.slide-left-enter, .slide-left-leave-to /* for versions 2.1.8 and above */ {
  transform: translateX(-100%);
}
.box {
  width: 100px;
  height: 100px;
  background-color: red;
  text-align: center;
  line-height: 100px;
}
</style>

In the above CSS, we define transition effects for the enter and leave active states (-active), enabling smooth animation over 0.5 seconds. Additionally, we set the transform properties for initial and final states, allowing the element to slide out completely to the left (-100% position) and return to its original position.

Step 3: Vue Instance

Finally, set up a Vue instance and define a variable show to control the element's visibility, which triggers the animation.

javascript
<script>
export default {
  name: 'App',
  data() {
    return {
      show: false
    }
  }
}
</script>

Example Explanation

In this example, clicking the button toggles the show variable, triggering Vue's conditional rendering (v-if). With the <transition> tag, Vue automatically applies the defined CSS animations, enabling the box to slide in and out.

This approach is concise and easily customizable through CSS adjustments to create richer animations tailored for various scenarios.