Categories
Vue 3

Vue 3 — Basic Transitions

Spread the love

Vue 3 is in beta and it’s subject to change.

Vue 3 is the up and coming version of Vue front end framework.

It builds on the popularity and ease of use of Vue 2.

In this article, we’ll look at how to add transitions with Vue 3.

Transitions

We can add transitions to our Vue app with various components

The transition component helps us add enter and leave transitions which are triggered by v-if .

Transition modes let us change the ordering of a transition.

Transitions with multiple components can be added with the transition-group component.

We can transition to different states in an app with watchers .

Class-based Animations & Transitions

We can add transitions by binding to a class.

For example, we can write:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>App</title>
    <script src="https://unpkg.com/vue@next"></script>
    <style>
      .shake {
        animation: shake 1s cubic-bezier(0.31, 0.07, 0.39, 0.97) both;
        transform: translate3d(0, 0, 0);
        backface-visibility: hidden;
        perspective: 1000px;
      }

      @keyframes shake {
        10%,
        90% {
          transform: translate3d(-1px, 0, 0);
        }

        20%,
        80% {
          transform: translate3d(2px, 0, 0);
        }

        30%,
        50%,
        70% {
          transform: translate3d(-4px, 0, 0);
        }

        40%,
        60% {
          transform: translate3d(4px, 0, 0);
        }
      }
    </style>
  </head>
  <body>
    <div id="app">
      <div :class="{ shake: on }">
        <button @click="on = !on">toggle</button>
        <p v-if="on">hello world!</p>
      </div>
    </div>
    <script>
      const app = Vue.createApp({
        data() {
          return {
            on: false
          };
        }
      });
      app.mount("#app");
    </script>
  </body>
</html>

to add the shaking transition effect to our div.

We have the translate3d to add the shaking left and right,

Negative is left and positive is right.

The shake class has the shake transition.

cubic-bezier is the easing function, which makes the transition non-linear.

transform keeps the div in place.

We apply the shake class when on is true , so when we click the toggle button to set on to true , we’ll see the elements shake.

Transitions with Style Bindings

We can also add transitions with style bindings.

For example, we can write:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>App</title>
    <script src="https://unpkg.com/vue@next"></script>
  </head>
  <body>
    <div id="app">
      <div
        @mousemove="onMouseMove"
        :style="{ backgroundColor: `rgb(${x}, 80, 50)` }"
        class="movearea"
      >
        <p>x: {{x}}</p>
      </div>
    </div>
    <script>
      const app = Vue.createApp({
        data() {
          return {
            x: 0
          };
        },
        methods: {
          onMouseMove(e) {
            this.x = e.clientX;
          }
        }
      });
      app.mount("#app");
    </script>
  </body>
</html>

When our mouse moves, then the onMouseMove method is called.

This gets the x coordinate of the mouse and set it to the this.x state.

Then we used x to set the background color by changing the first value of rgb .

Therefore, when we move our mouse, the background color will change.

Performance

CSS animations has better performance than using JavaScript to change the position of our elements.

Every redraw with JavaScript is an expensive operation, so we try to eliminate them if we can.

CSS animations is also faster because browsers have hardware acceleration capabilities.

Properties like perspective, backface-visibility, and transform: translateZ(x) will trigger a browser’s hardware acceleration capabilities.

Conclusion

Vue lets us animate our elements with CSS and class or style bindings.

Leave a Reply

Your email address will not be published.

If you like the content of this blog, subscribe to my email list to get exclusive articles not available to anyone else.