css transitions and positioning

Question

I've tried to get more familiar with transitions lately so I can use css to style my animations rather than scripts.

My Objective is a modal window (fixed position) which comes up when a certain button is clicked. I would like to have a visual effect like the button spawns the modal, so the animation ought to originate from the position of the button.

I'll insert some code at the end.

The question I have is whether there is a way without js to set the starting point of the animation (the position of the div while it is invisible) to the same location as the button. I assume it ought to be possible by simply having the div in the DOM right by that button. However how do I use a transition to animate between a DOM-bound position to a fixed position?

If possible I would like to use Javascript only to switch classes. But I would be ok with reading the position/offset of the button, too. I however got stuck with my attempts so far.

Anyone able to steer me on track again? Thank you.

jQuery(document).ready(function() { jQuery('button').on('click', function() { if (jQuery('div').hasClass('orig')) { jQuery('div').offset(jQuery('button').offset()).removeClass('orig').addClass('alter'); } else jQuery('div').removeClass('alter').addClass('orig'); }); });

.orig { overflow: hidden; position: fixed !important; margin-left: 0px; margin-top: 0px; width: 0px; height: 0px; background-color: white; border: 0px solid black; border-radius: 3px; transition-property: all; transition-duration: 0.2s; } .alter { overflow: hidden; position: fixed !important; top: 50% !important; left: 50% !important; margin-left: -100px; margin-top: -50px; width: 200px; height: 100px; background-color: white; border: 1px solid black; border-radius: 3px; transition-property: all; transition-duration: 0.2s; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <body><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> <button>klick</button> <div class="orig">Lorem Ipsum ganz viel text</div> <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> </body>

@jperezov that will only work if the button remains in the upper left corner. It sort of is supposed to work where ever the buttons is on the screen including different states of scrolling. — user3154108
– user3154108, Commented Dec 4, 2015 at 23:16
You could use the getBoundingClientRect() method on your button to get its position - developer.mozilla.org/en-US/docs/Web/API/Element/…. Then you could absolutely position your modal window and since you're transitioning to a fixed position I assume that should be everything? — lmenus
– lmenus, Commented Dec 4, 2015 at 23:32
@LubosMenus I tried, but am not able to get better results than with the jQuery .offset Function. — user3154108
– user3154108, Commented Dec 4, 2015 at 23:52

jperezov · Accepted Answer · 2015-12-04 23:43:26Z

It's not possible to do this in pure CSS when using position: fixed. If position: absolute is an option for you, then you can do this:

jQuery(document).ready(function() { jQuery('button').on('click', function() { var $modal = jQuery('.modal'); if ($modal.hasClass('orig')) { $modal.removeClass('orig').addClass('alter'); } else $modal.removeClass('alter').addClass('orig'); }); });

.modal { overflow: hidden; background-color: white; border: 1px solid black; border-radius: 3px; transition-property: all; transition-duration: 0.2s; } .modal.orig { position: absolute; top: 0; left: 0; border-width: 0; margin-left: 0px; margin-top: 0px; width: 0px; height: 0px; } .modal.alter { position: absolute; top: 50%; left: 50%; margin-left: -100px; margin-top: -50px; width: 200px; height: 100px; } .wrapper { position: relative; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <body> <pre> This is just here to push down the button a bit. </pre> <div class="wrapper"> <button>klick</button> <div class="orig modal">Lorem Ipsum ganz viel text</div> </div> </body>

Thank you, that is an interesting alternative. Since there is no practical need behind my question though I am still interested in getting it to work with fixed position somehow.

user3154108 · Accepted Answer · 2015-12-05 01:09:51Z

I think I figured out a work around. Not with as little javascript as I would have liked though.

I basically set the offset (thus css top and left) of the div on document load and then onScroll. I have no clue why it shouldn't work in the onClick right before the class switch. Maybe some queueing issue?

jQuery(document).ready(function() { jQuery('div').offset(jQuery('button').offset()); jQuery(document).on('scroll', function() { jQuery('div').offset(jQuery('button').offset()); }); jQuery('button').on('click', function() { if (jQuery('div').hasClass('orig')) { jQuery('div').removeClass('orig').addClass('alter'); } else jQuery('div').removeClass('alter').addClass('orig'); }); });

body { margin: 0px; padding: 0px; position: relative; } .orig { overflow: hidden; position: fixed !important; margin-left: 0px; margin-top: 0px; width: 0px; height: 0px; border: 0px solid black; border-radius: 3px; transition-property: all; transition-duration: 0.2s; } .alter { overflow: hidden; position: fixed !important; top: 50% !important; left: 50% !important; margin-left: -100px; margin-top: -50px; width: 200px; height: 100px; border: 1px solid black; border-radius: 3px; transition-property: all; transition-duration: 0.2s; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <body> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <button>klick</button> <div class="orig">Lorem Ipsum ganz viel text</div> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> </body>

Collectives™ on Stack Overflow

css transitions and positioning

2 Answers 2

1 Comment

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Related