Transition from 100% to auto

I have the following: http://jsfiddle.net/yHPTv/2491/

I was wondering why the transition isn't working? What it's supposed to do is slide in the hidden element (which can be of variable width) to the right edge of the .block element, however, it just pops in.

.block {
  position: relative;
  width: 500px;
  height: 300px;
  overflow: hidden;
  background: lightgrey;
}
.block .hidden {
  background: red;
  padding: 3px 10px;
  position: absolute;
  bottom: 0;
  left: 100%;
  transition: 1s;
}
.block:hover .hidden {
  transition: 1s;
  left: auto;
  right: 0;
}
<div class="block">
  <div class="hidden">ABCDEFGHIJKL</div>
</div>

I think it has something to do with left: auto because if I change it left: 50%, it works, but not in the way I need it to.

Thanks.

Answers:

Answer

As you say you can't animate from % to auto. But to get the desire effect you can also use transform property. Try this:

.block .hidden {
    background: red;
    padding: 3px 10px;
    position: absolute;
    bottom: 0;
    right: 0;
    transform:translateX(100%);
    transition: 1s;
}

.block:hover .hidden {
    transition: 1s;
    transform:translateX(0)
}

Check the Demo Fiddle

Answer

Consider transitioning on right, from -100% to 0:

.block {
    position: relative;
    width: 500px;
    height: 150px; /* shortened to fit in the "Run" window */
    overflow: hidden;
    background: lightgrey;
}

.block .hidden {
    background: red;
    padding: 3px 10px;
    position: absolute;
    bottom: 0;
    right: -100%;
    transition: 1s;
}

.block:hover .hidden {
    right: 0;
    transition: 1s;
}
<div class="block">
    <div class="hidden">ABCDEFGHIJKL</div>
</div>

Answer

For transition to work, you have to define the property you wish to change in both element states. In your example it doesn't work because there is no common property between '.hidden' and ':hover' (you set the 'left' property in '.hidden', and 'right' property in ':hover')

If you instead use something like:

.block {
    position: relative;
    width: 500px;
    height: 300px;
    overflow: hidden;
    background: lightgrey;
}

.block .hidden {
    background: red;
    padding: 3px 10px;
    position: absolute;
    bottom: 0;
    right: -100%;
    transition: 1s;
}

.block:hover .hidden {
    transition: 1s;
    right: 0%;
}

It will work because we defined the 'right' property in both states ('.hidden' and ':hover')

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.