I have a problem with transition property. Namely, it works only after first time. At the first time there is no transition effect.
JS code:
document.addEventListener("DOMContentLoaded", function() {
var second = document.querySelector('.square');
if(second) {
second.addEventListener("mouseenter", function() {
var maxX = Math.floor(Math.random() * (window.innerWidth - 200));
var maxY = Math.floor(Math.random() * (window.innerHeight - 200));
this.style.left = maxX + 'px';
this.style.top = maxY + 'px';
this.style.transition = 'left 2s, top 2s';
});
}
});
CSS code:
* {
margin: 0;
padding: 0;
}
main {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
.second {
height: 200px;
width: 200px;
position: absolute;
display: flex;
justify-content: center;
align-items: center;
}
EDIT:
UPDATE:
Moving transition to CSS doesn't change anything. Square has to be centered and can't leave the window.
Move transition
, top
and left
to css - browser should know what to transition from and how to transition before you set new X and Y.
document.addEventListener("DOMContentLoaded", function() { var second = document.querySelector('.square'); if(second) { second.addEventListener("mouseenter", function() { var maxX = Math.floor(Math.random() * (window.innerWidth - 200)); var maxY = Math.floor(Math.random() * (window.innerHeight - 200)); this.style.left = maxX + 'px'; this.style.top = maxY + 'px'; }); } });
.square { background:red; height: 200px; width: 200px; position: absolute; display: flex; justify-content: center; align-items: center; transition: left 2s, top 2s; top: 0; left: 0; }
<div class="square"> </div>
EDIT 1
If you want to initially center your square - add this
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
document.addEventListener("DOMContentLoaded", function() { var second = document.querySelector('.square'); if(second) { second.addEventListener("mouseenter", function() { var maxX = Math.floor(Math.random() * (window.innerWidth - 200)); var maxY = Math.floor(Math.random() * (window.innerHeight - 200)); this.style.left = maxX + 'px'; this.style.top = maxY + 'px'; }); } });
.square { background:red; height: 200px; width: 200px; position: absolute; display: flex; justify-content: center; align-items: center; transition: left 2s, top 2s; top: 50%; left: 50%; transform: translate(-50%, -50%); }
<div class="square"> </div>
EDIT 2
Taking into account your fiddle - you should modify your maxX
and maxY
calculations because transform
property moved center of your square from "top left" to "center center":
document.addEventListener("DOMContentLoaded", function() { var second = document.querySelector('.square'); if(second) { second.addEventListener("mouseenter", function() { var maxX = 100 + Math.floor(Math.random() * (window.innerWidth - 200)); var maxY = 100 + Math.floor(Math.random() * (window.innerHeight - 200)); this.style.left = maxX + 'px'; this.style.top = maxY + 'px'; }); } });
* { margin: 0; padding: 0; } main { height: 100vh; display: flex; justify-content: center; align-items: center; position: relative; } .square { height: 200px; width: 200px; position: absolute; -webkit-box-shadow: 0px 0px 70px 5px rgba(0,0,0,0.5); -moz-box-shadow: 0px 0px 70px 5px rgba(0,0,0,0.5); box-shadow: 0px 0px 70px 5px rgba(0,0,0,0.5); display: flex; justify-content: center; align-items: center; font-size: 20px; transition: left 0.8s, top 0.8s; top: 50%; left: 50%; transform: translate(-50%,-50%); }
<main> <div class="square"> <p>catch me!</p> </div> </main>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.