从100％过渡到自动

Question

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.

Answer 1

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 2

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 3

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')