JSFiddle - React, Tailwind, and code Playground

by staeff

HTML

<html>
  
  <head>
    <title>Transitions!</title>
  </head>
  
  <body>
    <div id="button">Change</div>
    <div id="writing" class=" ui-corner-all">This box changes size when you click that button!</div>
  </body>

</html>

CSS

#button {
  background:#f8f8f8;
  width:100px;
  padding:3pt;
  text-align:center;
  font-weight:bold;
  -moz-border-radius:3pt;
  -webkit-border-radius:3pt;
  border-radius:3pt;
  border: 2px #EEE solid;
}
#writing {
  margin:4pt;
  text-align:center;
  height:100px;
  background:#f8e6d4;
}
.transition {
  width: 400px;
  height: 500px;
}

JavaScript

// Transitions with jQuery UI and callbacks
$(function () {
  $("#button").click(function () {

    // Add the class of 'transition' with the duration
    // of 1000 and a callback to callbackFunction as
    // parameters.
    $("#writing").addClass("transition", 1000, callbackFunction);

  });

  function callbackFunction() {
    setTimeout(function () {

      // Remove the 'transition' class here
      $("#writing").removeClass("transition", 1500);

    }, 1500);
  }
});