A js helper function that helps create CSS transitions from and to the value of auto.
You can find a demo here.
-
Import file in <head>
<script src="..\src\css-auto-transition-min.js"></script>`
-
Set a regular CSS transition
.overlay{ transition: all 1s ease-in-out; }
-
Add attributes to the element you want to animate
auto-transition
: String with "property from to" values separated by spaces. Property can be "height" or "width". From/to can be "auto" or regular CSS supported units.auto-transition-trigger
: (Optional) String selector for the element that will trigger the transition on hover. If omitted, the trigger will be this element.
<div class="overlay" auto-transition="height auto 100%" auto-transition-trigger="#fromAuto"> (...) </div>