JSFiddle - React, Tailwind, and code Playground

by ilake

HTML

<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<div class="big-section"> Big Section </div>
<div class="transition">
  <div class="ease">ease</div>
  <div class="linear">linear</div>
  <div class="ease-in">ease-in</div>
  <div class="ease-out">ease-out</div>
  <div class="ease-in-out">ease-in-out</div>
  <div class="step-start">step-start</div>
  <div class="step-end">step-end</div>
</div>

CSS

div {
 transition-property: all;
 transition-duration: 2s;
 transition-delay: 1s;
 height: 20px;
 background-color: green;
 border: 1px solid #000000;
}
div.transition {
 background-color: white;
}
.ease {
  transition-timing-function: ease;
}

.linear {
  transition-timing-function: linear;
}

.ease-in {
  transition-timing-function: ease-in;
}

.ease-out {
  transition-timing-function: ease-out;
}

.ease-in-out {
  transition-timing-function: ease-in-out;
}

.step-start {
  transition-timing-function: step-start;
}

.step-end {
  transition-timing-function: step-end;
}

.big-section {
  transition: all 2s ease-out 1s;
  background-color: red;
  height: 200px;
}
.hidden {
  height: 10px;
}
.move {
  margin-left: 100px;
}

JavaScript

$(document).ready(function() {
  $('.big-section').click(function() {
    $(this).toggleClass("hidden");
  });
  
   $('.transition div').click(function() {
    $(this).toggleClass("move");
  }); 
});