CODEWITHSUNDEEP
css
BaronGrivet
BaronGrivet

Reputation: 4424

How to wrap parent DIV around scaled child DIV

I have a parent div wrapped around a scaled child div. The child div starts off with transform:scale(0,0); & expands to transform:scale(1,1); when a button is clicked.

.content-wrapper {
  display: inline-block;
  background-color: #ddf;
  padding: 10px;
  clear: both;
}

.content {
  padding: 10px;
  background-color: #fff;
  display: flex-block;
  overflow: hidden;
  transform:scale(0,0);
  transform-origin:top; 
  transition:transform 1s ease-out; 

}

.content.open {
  transform:scale(1,1);
}

However the parent div content-wrapper stays at the same size of the child div content - even when the child is "closed".

enter image description here

The desired behaviour is when the child div is closed the parent div shrinks to only wrap around the button.

enter image description here

JSFiddle of Example

Is it possible to wrap the parent div around the child div when it's "closed" in this example?

Upvotes: 0

Views: 526

Answers (3)

BaronGrivet
BaronGrivet

Reputation: 4424

I found this comment on an older question:

This method only partially achieves the desired effect but doesn't actually remove the space. The transformed box acts like a relatively positioned element - the space is taken up no matter how it is scaled. Check out this jsFiddle which takes your first one and just adds some bogus text at the bottom. Note how the text below it doesn't move up when the box height is scaled to zero. – animuson♦ Jul 29 '13 at 20:37

So with that in mind I used the max-height/ max-width hack to get something close to what I was after: http://jsfiddle.net/BaronGrivet/ztxa5kwu/176/

.content {
  padding: 10px;
  background-color: #fff;
  display: flex-block;
  overflow: hidden;
  transform:scale(0,0);
  transform-origin:top; 
  transition:all 1s ease-out; 
  max-width: 0;
  max-height: 0;  
}

.content.open {
  transform:scale(1,1);
  max-width: 500px;
  max-height: 500px;
}

Upvotes: 0

user6168288
user6168288

Reputation:

Try this:

.content {

    background-color: #fff;
    overflow: hidden;
    transform:scale(0,0);
    transform-origin:top; 
    transition:transform 1s ease-out;

    display: block;
    padding: 0;
    height: 0; width: 0;
}

.content.open {
    padding: 10px;
    height: auto; width: auto;
    transform: scale(1,1);
}

Edit: Play with this:

.content {
    padding: 0;
    background-color: #fff;
    display: block;
    overflow: hidden;
    transform-origin:top;


    transition: transform 1s ease-out, max-width 0.5s ease-out 0.4s, max-height 1s ease-out;
    transform: scale(0,0); max-width: 0; max-height: 0;
}

.content.open {
    padding: 10px;

    transition: transform 1s ease-out, max-width 1s ease-out, max-height 8s ease-out;
    transform: scale(1, 1); max-width: 1920px; max-height: 1080px;
}

Upvotes: 1

ghostdivider
ghostdivider

Reputation: 111

This will be a little challenging because the background color is attached to the content container. I would remove the background color from the main container, then make it a separate div positioned absolute

<div class="content">
    ...
    <div class="content-bg"> //contains your background color

then manipulate that based on your click handler.

I've updated the JSFiddle http://jsfiddle.net/ztxa5kwu/90/

CSS for the new div:

.content-bg{
  position: absolute;
  background-color: #ddf;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  z-index: -1;
  transition: all .5s ease;
  transform-origin: bottom right;
}

Notice the transform-origin: bottom right; to scale the background towards your button. In the JSFiddle, I made the button take on a border the same color as the background, but you could easily edit the size of the new <div class="content-bg"></div> to fit around your button.

Hope that helps, and gets you in the right direction.

Upvotes: 1

Related Questions