[Vuejs]-How to add styling when app is mounted? vue js

by

0👍

✅

You have two solutions bound a class or bound a style.

PD: If I guess correctly you want to have a transition depending on the state of a component, you can also use vue transitions for this https://v2.vuejs.org/v2/guide/transitions.html

Bounding a css class

<template>
 <div id="app" :class={ visible: mounted }>
   <h1>app</h1>
 </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      mounted: false
    }
  },
  mounted() {
    this.mounted = true;
  }
}
</script>

<style>
#app{
  width: 100%;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}

.visible {
  opacity: 1;
}
</style>

Bounding a style

<template>
 <div id="app" :style=`mounted && 'opacity: 1;'`>
   <h1>app</h1>
 </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      mounted: false
    }
  },
  mounted() {
    this.mounted = true;
  }
}
</script>

<style>
#app{
  width: 100%;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}
</style>

Leave a comment