Menu
So I have an envelope image and a letter image and I want the letter to smoothly transition out of the envelope onmouseover and I want the letter to smoothly transition back to place onmouseout. Now the first mouseover is perfect, the envelope slides to a -400px width in order to reveal the letter at a 1 second transition, but onmouseout, the envelope harshly snaps back to place and I have no idea why. Also, any additional mouseovers after the mouseout, it harshly snaps both the onmouseover and onmouseout events. Here is the code:
<!doctype html>
<html lang='en-us'>
<head>
<title>Test animation</title>
<style>
.displayNow {
display: flex;
flex-direction: row;
justify-content: flex-end;
position: relative;
}
.letter {
position: absolute;
}
.envelope {
position: absolute;
transition: width 1s ease-in-out;
transition-timing-function: linear;
-webkit-transition: 1s ease-in-out;
-webkit-transition-timing-function: linear;
}
</style>
<script>
function moveOut() {
var cssString = "margin-left:-400px;";
document.getElementById('envelope').style.cssText=cssString;
}
function moveIn() {
var cssString = "margin-left:auto;";
document.getElementById('envelope').style.cssText=cssString;
}
</script>
</head>
<body>
<div class='displayNow'>
<!-- Letter -->
<img src='Letter.png' class='letter' id='letter' onmouseover='moveOut()' onmouseout='moveIn()' alt='letter'>
<!-- Envelope -->
<img src='Envelope.png' class='envelope' id='envelope' onmouseover='moveOut()' onmouseout='moveIn()' alt='envelope'>
</div>
</body>
</html>I have also tried a :hover selector as opposed to the onmouseout/in JavaScript event which produced the same result.
718
Instead of setting margin-left to auto, set it to 0 (or wherever else it's supposed to originally sit at)
I believe CSS3 transitions do not know how to handle the auto settings. This will apply to any transitionable element that can be set to auto. I have ran into this problem several times when trying to transition heights and widths.
As far as the issue of snapping both ways after the initial transition, I'm not sure if that is related to the margin-left:auto issue or not but I would be willing to bet that it will fix it
64
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
