Image for post
Image for post
By Sarah Pflug in Art & Design

Hi, everyone. I would like to explain how to switch themes with Vue and CSS in different ways of cool animations in this article. Let start with a simple way.


Vue offers built-in <transition> component to apply transition effects and animate DOM easily

Introduction

Vue offers built-in <transition> component to apply transition effects and animate DOM easily. It is a special component that we can use to animate anything which is between the opening and closing tag.

Only ONE element can animate with the <transition> component.

You can have multiple elements inside of this <transition> component, but then have to apply conditions of these elements using v-if or v-show. We can use the <transition-group> component for multiple components.

Demo Scenario

Alert Notification will appear and slide up after 5 seconds using built-in <transition> component. Here’s an example:

Vue Transition — Alert Notification

There are 6 CSS…


Part 2: activated, deactivated, errorCaptured, renderTracked, renderTriggered

Introduction

Let explore Vue’s lifecycle hooks which include activated, deactivated, errorCaptured, renderTracked, and renderTriggered in this article. Vue 3 just release recently and updated some cool features for an example renderTracked and renderTriggered lifecycle hooks. The other lifecycle hooks are explained here.

activated and deactivated

activated and deactivated lifecycle hooks will be invoked accordingly when a component is wrapped by a dynamic component — keep-alive. This dynamic component is useful if want to preserve/maintain the previous state's when switching the tab or navigate to another page.

  • activated hook shows that the dynamic component e.g. Home component is active on the web page.
  • The deactivated


Part 1: beforeCreate, beforeMount, beforeUpdate, beforeUnmount

Introduction

There are 13 of Vue’s lifecycle hooks according to the latest Official Vue documentation. Every Vue instance that created will go through lifecycle hooks. Here are the Vue’s lifecycle hooks will explain in this article:

  • beforeCreate and created
  • beforeMount and mounted
  • beforeUpdate and updated
  • beforeUnmount and unmounted

destroyed and beforeDestroy lifecycle hooks (in Vue.js 3.0.0+) are deprecated.

Another 5 of Vue’s lifecycles hooks are explained in Part 2 which included activated, deactivated, errorCaptured, renderTracked, and renderTriggered.

beforeCreate and created

Vue declares and knows data properties in these two phases. We can fetch the data from the server-side in the created hook before render…

CC Eng

A web developer.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store