animation.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.9.1/css/bulma.min.css">
    <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"
        integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
    <link href="https://fonts.googleapis.com/css2?family=Merriweather&display=swap" rel="stylesheet">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.1/vue.js"></script>
    <style>
        .shake {
            animation: shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
            transform: translate3d(0, 0, 0);
        }

        @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);
            }
        }

        .v-enter-active,
        .v-leave-active {
            transition: opacity 0.5s ease;
        }

        .v-enter-from,
        .v-leave-to {
            opacity: 0;
        }
    </style>
</head>

<body>
    <nav class="navbar" role="navigation" aria-label="main navigation">
        <div class="navbar-brand">
            <a class="navbar-item" href="https://bulma.io">
                <img src="https://upload.wikimedia.org/wikipedia/commons/9/95/Vue.js_Logo_2.svg" width="148"
                    height="36">
            </a>
        </div>

        <div class="navbar-menu">
            <div class="navbar-end">
                <a class="navbar-item" href="/index.html">
                    HOME
                </a>

                <a class="navbar-item" href="/pokemon.html">
                    POKEMON
                </a>

                <a class="navbar-item" href="/about.html">
                    ABOUT
                </a>

                <a class="navbar-item" href="/animation.html">
                    ANIMATION
                </a>

                <a class="navbar-item" href="/conditional.html">
                    CONDITION
                </a>
            </div>
        </div>
    </nav>
    <!-- Hero del producto -->
    <section class="hero is-white" id="app">
        <div v-if="isOpened" class="hero-body" :class="{ shake: isOpened }">
            <p class="has-text-primary">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur, eius.
            </p>
        </div>
        <div class="container">
            <button class="button is-dark" @click="isOpened = !isOpened">
                {{ isOpened ? 'Close' : 'Open' }}
            </button>
        </div>

        <Transition>
            <div v-if="show" class="hero-body">
                <p class="has-text-primary">
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur, eius.
                </p>
            </div>
        </Transition>
        <div class="container">
            <button class="button is-light" @click="show = !show">
                {{ show ? 'Close' : 'Open' }}
            </button>
        </div>
    </section>
    <script>
        let app = new Vue({
            el: "#app",
            data() {
                return {
                    isOpened: false,
                    show: false
                }
            },
        });
    </script>
</body>

</html>