Skip to content

A js helper function that helps create css transitions from and to the value of auto.

License

Notifications You must be signed in to change notification settings

DanielProp/css-auto-transition

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

4 Commits
 
 
 
 
 
 
 
 

Repository files navigation

css-auto-transition

A js helper function that helps create CSS transitions from and to the value of auto.

alt text

Demo

You can find a demo here.

Usage

  • 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>

About

A js helper function that helps create css transitions from and to the value of auto.

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published