JSFiddle - React, Tailwind, and code Playground

by samuelog

JavaScript

<template>
      <div class="hello">
      <transition name="test">
        <h1 v-if="status">{{ msg }}</h1>
        </transition>
        <input type="button" @click="status=!status" value="test transition"/>
      </div>
    </template>
    
    <script>
    export default {
      name: 'HelloWorld',
      data () {
        return {
          msg: 'welcome to your Vue.js App',
          status: false
        }
      },
      mounted: function(){
        this.status = true;
      }
    }
    </script>
    
    <!-- Add "scoped" attribute to limit CSS to this component only -->
    <style>
    h1, h2 {
      font-weight: normal;
    }
    
    ul {
      list-style-type: none;
      padding: 0;
    }
    
    li {
      display: inline-block;
      margin: 0 10px;
    }
    
    a {
      color: #42b983;
    }
    
    .test-enter-active {
      transition: transform 3s;
      text-shadow:0px 5px 10px #fdff00;
    }
    .test-leave-active {
      transition: transform 3s;
      text-shadow:0px 5px 10px #a1a194;
    }
    
    .test-enter, .test-leave-to {
      transform: translateX(90%);
    }
    
    .test-enter-to, .test-leave {
      transform: translateX(-15%);
    }
    </style>