http://stackoverflow.com/questions/17905827/why-does-my-image-have-space-underneath
We like to transition an element to the right and change its color.
.parent {
position: relative;
padding-left: 10px;
color: $white;
}
.child {
position: absolute;
top: 20px;
right: 20px;
}
.parent:hover {
color: blue;
padding-left: 20px;
}
.parent:hover child {
right: 10px;
}
We have added transitions.
The properties padding-left
and color
for the parent element.
And the right
and color
properties for the child element.
.parent {
position: relative;
padding-left: 10px;
color: $white;
transition: padding-left 0.5s ease,
color 0.5s ease;
}
.child {
position: absolute;
top: 20px;
right: 20px;
transition: right 0.5s ease, color 0.5s ease;
}
We removed the color 0.5s ease
transition from the .child
element.
Now everything works as expected.
.parent {
position: relative;
padding-left: 10px;
color: $white;
transition: padding-left 0.5s ease,
color 0.5s ease;
}
.child {
position: absolute;
top: 20px;
right: 20px;
transition: right 0.5s ease;
}
The way you think about adding transitions is important to avoid these kinds of mistakes.
For the .parent
we want to transition the color
and padding-left
properties. Not really a problem here.
But you could argue for the .child
that you want to transition the right
AND the color
property. Since its color should also change.
But because the .child
inherits the color from its parent, there is no need to transition it.
We want to change the color of the parent, not the child. The child color just happens to also change because it inherits the color. But we dont want to transition the color of the child directly.