Sliding an element out as one slides in - html

Question

I'm trying to create a hover-over effect where my white box slides to the right and my text slides back into the screen.
You can see from the following video that it works if I hover over the middle of the box but because I am using negative right properties, it is glitching out if I hover over it on the left side. Does anyone know an alternative that I can do to get this to work smoothly?
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: pink;
}
nav {
position: fixed;
top: 0;
right: 0;
border: 1px solid red;
height: 200px;
width: 120px;
}
nav a {
background-color: #fff;
float: right;
padding: 10px;
display: block;
width: 100%;
margin-bottom: 10px;
transition: all .4s;
text-decoration: none;
color: black;
font-weight: bold;
}
nav a:hover {
color: yellow;
margin-right: 10px;
border-box: content-box;
background-color: transparent;
}
.box,
.navlink {
position: fixed;
background-color: #fff;
width: 110px;
height: 35px;
right: 0;
transition: all .4s;
}
.navlink {
right: -110px;
font-size: 24px;
padding-top: 5px;
font-weight: bold;
color: gold;
background-color: transparent;
}
.box:hover {
right: -110px;
}
.box:hover .navlink {
right: 0;
}
.one {
top: 0;
}
.two {
top: 45px;
}
.three {
top: 90px;
}
<div class="box one">
<div class="navlink one">Home</div>
</div>
<div class="box two">
<div class="navlink two">Pizza</div>
</div>
<div class="box three">
<div class="navlink three">Plaything</div>
</div>

Answer 1

What I would do is a background div inside the box with position absolute.
Here is my propos: http://codepen.io/r3npi2/pen/JKNYmd
HTML:
<div class="box one">
<div class="bg"></div>
<div class="navlink one">Home</div>
</div>
<div class="box two">
<div class="bg"></div>
<div class="navlink two">Pizza</div>
</div>
<div class="box three">
<div class="bg"></div>
<div class="navlink three">Plaything</div>
</div>
CSS:
body {
background-color: pink;
}
.box {
position: fixed;
width: 110px;
height: 35px;
right: 0;
}
.box .bg {
position: absolute;
background-color: #fff;
width: 100%;
height:100%;
right: 0;
top:0;
transition: all .4s;
}
.navlink {
position: absolute;
right: -110px;
font-size:24px;
font-weight:bold;
color:gold;
background-color: transparent;
width: 100%;
height:100%;
top:0;
transition: all .4s;
padding-top:5px;
box-sizing: border-box;
}
.box:hover .bg {
right:-110px;
}
.box:hover .navlink {
right: 0;
}
.box.one {
top: 0;
}
.box.two {
top: 45px;
}
.box.three {
top: 90px;
}

Answer 2

Maybe it's not the best way, depending on your minimal browser requirement, but it will do.
I suggest using 3d transforms to enhance performance, since it triggers gpu.
CSS:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: pink;
}
.fixed-wrap {
position: fixed;
right: 0;
}
.hover-box {
margin-bottom: 10px;
width: 110px;
height: 35px;
transition: all .4s;
position: relative;
}
.hover-box::before {
content: "";
background-color: #fff;
width: 110px;
height: 35px;
position: absolute;
z-index: -2;
transition: all .2s ease-in-out;
}
.navlink {
font-size:24px;
/* Height hack */
line-height: 35px;
font-weight:bold;
color:gold;
transition: all .2s ease-in-out;
transform: translate3d(110px,0,0);
}
.hover-box:hover .navlink {
transform: translate3d(0,0,0);
}
.hover-box:hover:before {
transform: translate3d(110px,0,0);
}
HTML
<div class="fixed-wrap">
<div class="hover-box one">
<div class="navlink one">Home</div>
</div>
<div class="hover-box two">
<div class="navlink two">Home</div>
</div>
<div class="hover-box three">
<div class="navlink three">Home</div>
</div>
</div>
https://jsfiddle.net/xdc6umcd/

Answer 3

Suggest to leave the the box objects as a container with a hover state. But not transition
Have 2 child objects that transition on box:hover
.box:hover .slideOff{
left:100%;
}
.box:hover .slideOn{
left:0%;
}