Tuesday 28 November 2023

Revisit "How to make the entire page fade in on load" using Vue.js

 index.html

<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="UTF-8" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>Body Fade In</title>

    <link rel="stylesheet" href="./style.css" />

  </head>

  <body>

    <transition name="fade" appear>

      <h1>Hello World!</h1>

    </transition>

    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

    <script src="./app.js"></script>

  </body>

</html>

style.css

.fade-enter-active,

.fade-leave-active {

  transition: opacity 1s;

}

.fade-enter-from,

.fade-leave-to {

  opacity: 0;

}

app.js

const app = Vue.createApp({});

app.mount("body");

No comments:

Post a Comment