Skip to content
Adds the ability to transition from auto to X.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
example
src
.DS_Store
.gitignore
LICENSE
README.md

README.md

mutant-transition.js

Mutant Transition automatically sets the style attributes for elements when the DOM changes. This allows you to do things like transition from height: auto to height: 0px. Mutant Transition doesn't require you to use learn any special javascript to animate elements. Instead, it reads changes to the DOM and changes the style attributes in concert. It even detects changes done through "inspect element".

Set Up

Mutant Transition leverages Mutation Observer (IE11+). Because of this, Mutant Transition requires minimal setup. You simply add the appropriate data-attributes (data-mutant-attributes="height,width", for example), include my script, ( https://cdn.rawgit.com/jontroncoso/mutant-transition/master/src/mutant-transition.js), and mutant-transition takes care of the rest. As you manipulate the DOM using classes and moving elements around, Mutant Transition quickly makes a copy of the element in the new state and uses those measurements to set the style-attributes (style="width: 100px; height: 758px, for example).

<div class="example" data-mutant-attributes="height,width">
            This is an example with mutant-transition
        </div>

Caveats

I came up with this idea a couple weeks ago and kinda threw this together. Consider this a proof of concept for now. I'll go through it later to refactor it so that it is more accessible to the public. It currently requires jquery for selecting and iterating, etc...

Positioning

CSS computes a given element using different formulas that are dependant on whats going on, (absolute-positioning, block, inline, etc..). For example, sometimes the padding is calculated as part of the height. Sometimes its considered outside the height. I need to work the different circumstances into this plugin.

Width

Since, its computing the elements width in pixels, I'd stay away from using width. Especially if you're using responsive design.

You can’t perform that action at this time.