CSS transition doesn't work when javascript added properties continuous - javascript

Below is a simplified version of a problem I am having with my website.
function move(){
document.getElementById("box").style.transition = "0s";
document.getElementById("box").style.top = "100px";
document.getElementById("box").style.transition = "2s";
document.getElementById("box").style.top = "0px";
}
#box{
width:100px;
height:100px;
background:red;
position:relative;
top:0px;
}
<div id="box" onclick="move()"></div>
What I want it to do is make the box instantaneously jump downwards, and then slowly move back to its starting position. I have tested each of the four lines of code inside move() separately and they work perfect. I just can't get them to run in one go.
What am I doing wrong?

It seem the code needs to delay before assigning new property that cause browser can process the request. So you need to use setTimeout() to solving this problem.
function move(){
document.getElementById("box").style.transition = "0s";
document.getElementById("box").style.top = "100px";
setTimeout(function(){
document.getElementById("box").style.transition = "2s";
document.getElementById("box").style.top = "0px";
}, 10);
}
#box{
width:100px;
height:100px;
background:red;
position:relative;
top:0px;
}
<div id="box" onclick="move()"></div>

Instead of relying on transitions, it would be better to use #keyframes and animation, so that you don't have to use dirty tricks like changing the transition duration from 0 to actual value mid-animation to achieve the jump. Below is an example that utilizes the #keyframes css features:
function move(){
document.getElementById("box").style.animation = "movement 2s";
}
#box{
width:100px;
height:100px;
background:red;
position:relative;
top:0px;
}
#keyframes movement {
from {top: 100px;}
to {top: 0px;}
}
<div id="box" onclick="move()"></div>

Related

How to stop a css slide animation (starting on load) when user scrolls?

There's a trick in JS I can't achieve, it relies on stopping a slidding animation made in CSS. In the moment, I have a long div with a random images content that slides in from the top and then out from the bottom. The animation runs at page load thanks to a 'slide down' class, calling the desired slide effect. I also set a scroll effect that allows the user to scroll in this div, BUT I'd like the scroll to take priority over the animation. The animation is finally only a way to encourage the user to scroll. I tried the following code but it has no effect :
$(window).scroll(function() {
('#scroller').removeClass("slidedown");
});
Could that be linked to the animation, like if it was considered as a 'scroll action' ? I attempt to handle this with 'if (ScrollTop < = >)' parameters but it simply has no effect or it just cancels the animation, which is unwanted.
'.on('mousewheel', function(){' doesn't seem to work. Replace '$(window)' by $('#scroller') has no effect either. I'm just thinking on the best way to settle this, but I need at least some advices to understand what I'm doing wrong (and I have to precise that I'm a beginner) !
Please find some key codes below :
----
HTML
----
<div id="scroller-wrapper">
<div id="scroller" class="slidedown">
<div id="img-defile1" class="img-defile">
<img src="img/ceaac.jpg"/>
</div>
<div id="img-defile2" class="img-defile">
<img src="img/ceaac2.jpg"/>
</div>
</div>
</div>
---
CSS
---
#scroller-wrapper {
top:0;
left:0;
width:102vw;
height:100%;
position:absolute;
overflow-y:scroll;
overflow-x:hidden;
transform: scale(1, -1);
z-index:2;
}
#scroller {
max-width:100%;
width:60%;
height:1250%;
position:relative;
z-index:800;
display:block;
transform: scale(1, -1);
}
.slidedown {
animation-duration:120s;
animation-name: slidedown;
animation-timing-function:linear;
animation-iteration-count:1;
animation-fill-mode: forwards;
}
#keyframes slidedown {
0% {
bottom: -75%;
}
100% {
bottom: 1150%;
}
}
.img-defile {
display:block;
max-width:100%;
height:auto;
position:absolute;
overflow:hidden;
}
.img-defile img {
width:600px;
}
.custom-scroll {
height: calc(80% - 20px);
}
---------
JS/Jquery
---------
$('#scroller').scroll(function () {
if ($(this).scrollTop() > 0) {
$('#scroller').addClass("custom-scroll");
return false;
} else {
$('#scroller').removeClass("custom-scroll");
}
});
$('.img-defile').each(function(i) {
$pT=$("#scroller").height();
$pL=$("#scroller").width();
$(this).css({
top:Math.floor(Math.random()*$pT),
left:Math.round(Math.random()*$pL)
});
});
Many thanks in advance !

transition opacity not working when creating element [duplicate]

This question already has answers here:
CSS Transition fails on jQuery .load callback
(4 answers)
Closed 6 years ago.
transition opacity from 0 to 1 is not working. here is my code: https://jsfiddle.net/ax4aLhjq/19/
//html
<div id="a">
<div style="height:20px"></div>
</div>
//css
#a{
width:200px;
background-color:salmon;
margin:0px;
padding:0px;
height:200px;
overflow: auto;
}
#a .item{
margin:0px 5px;
background-color:teal;
padding:10px;
color:white;
opacity:0;
transition:opacity .5s ease-in-out;
}
//js
function add(){
var div = document.createElement("div");
div.className ="item";
var newtext = document.createTextNode("aa");
div.appendChild(newtext);
document.querySelector("#a").appendChild(div);
var separator = document.createElement("div");
separator.style.height="10px";
document.querySelector("#a").appendChild(separator);
//apply opacity
div.style.opacity=1;
}
setInterval(add,3000);
Am I doing something wrong?
I've found the answer here: https://timtaubert.de/blog/2012/09/css-transitions-for-dynamically-created-dom-elements/
It appears that when an element is added, repaint is needed and somehow the browser is trying to optimize the computation, and is doing the opacity=0 and opacity=1 in the same cycle.
The solution is to use getComputedStyle : https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle
" getComputedStyle() in combination with accessing a property value
actually flushes all pending style changes and forces the layout
engine to compute our ’s current state"
var elem = document.createElement("div");
document.body.appendChild(elem);
// Make the element fully transparent.
elem.style.opacity = 0;
// Make sure the initial state is applied.
window.getComputedStyle(elem).opacity;
// Fade it in.
elem.style.opacity = 1;
Problem:
You are setting the opacityto 1 the same time you were creating the element.
Solution:
You have to delay tha action of showing the element, you need to set the opacity within a timeout to make the animation effect otherwise all elements will be just appended.
You can see this snippet I used a setTimoutto make the effect of the opacity animation:
//js
function add(){
var div = document.createElement("div");
div.className ="item";
var newtext = document.createTextNode("aa");
div.appendChild(newtext);
document.querySelector("#a").appendChild(div);
var separator = document.createElement("div");
separator.style.height="10px";
document.querySelector("#a").appendChild(separator);
//apply opacity
setTimeout(function(){
div.style.opacity=1;
}, 2000);
}
setInterval(add,1000);
//css
#a{
width:200px;
background-color:salmon;
margin:0px;
padding:0px;
height:200px;
overflow: auto;
}
#a .item{
margin:0px 5px;
background-color:teal;
padding:10px;
color:white;
opacity:0;
transition:opacity .5s ease-in-out;
}
<div id="a">
<div style="height:20px"></div>
</div>
Make a setTimeout like this window.setTimeout(function(){div.style.opacity=1;},17);. So the animation will effect next time.

why changing source of image , execute my inline javascript

Hi guys i just created a webpage , that use pagemethods
like this
function get_frame() {
//send a request to change image named "1.jpeg" in path of "src/frames/1.jpeg"
PageMethods.GrabFrame(imgw, imgh, t, f);
}
function t() {
//refresh image source to new image and set timer
document.getElementById('dImg').src = "src/frames/1.jpeg?" +
new Date().getTime();
setTimeout(function () { get_desktop(); }, Main.IMGrefresh.value);
}
function f() {
//do nothing
var x = 0;
}
And also used an inline javascript with jquery like this
<script>
$("#cover").mousemove(function (e) {
var parentOffset = $(this).parent().offset();
var relX = e.pageX - parentOffset.left;
var relY = e.pageY - parentOffset.top;
move_mouse(relX, relY);
});
</script>
And some asp.net clientside code like this
<div id="dDiv">
<img id="dImg" alt="" src="" />
<div id="cover">
</div>
</div>
That the inline javascript is at the end of that html code
So move_mouse() method must run only when user move his mouse, it moves correctly but it moves even when mouse didn't have movement when image refreshes, i mean when image refreshed by javascript, it runs move_mouse method, too.
Css for these elements
#cover {
position:absolute;
top:0px;
left:0px;
text-align:center;
background-color:Black;
height:200px;
width:300px;
border:0px none black;
margin:0px auto 0px auto;
filter: alpha(opacity=1);
-moz-opacity: 0.01;
-khtml-opacity: 0.01;
opacity: 0.01;
}
#dDiv {
position:relative;
text-align:center;
background-color:Black;
height:200px;
width:300px;
border:0px none black;
margin:0px auto 0px auto;
}
#dImg {
background-color:Black;
height:200px;
width:300px;
border:0px none black;
margin:0px 0px 0px 0px;
}
And also they are changing in javascript
function resize() {
imgh = Main.IMGheight.value;
imgw = Main.IMGwidth.value;
$("#dDiv").css("height", imgh);
$("#dDiv").css("width", imgw);
$("#dImg").css("height", imgh);
$("#dImg").css("width", imgw);
$("#cover").css("height", imgh);
$("#cover").css("width", imgw);
}
Ahh i just found it myself AGAIN , just move the mouse event to js function and put it in body onload , because inline javascript methods are saved in catch and this command => "new Date().getTime();" make it to refresh and get the new method , so this triggers the event .

Javascript offsetLeft doesn't work

Here's code where I want to use it:
if(e.keyCode==32)
{
var c=document.createElement("img");
c.src="http://findicons.com/files/icons/1075/scrap/300/aqua_ball_red.png";
c.id="ball";
c.style.top=down+"px";
document.body.appendChild(c);
setTimeout(function move(){
c.style.left=1200+"px";
},200);
setTimeout(function kill(){
c.style.opacity=0;
},700);
}
};
It's actually a moving ball which moves to certain coords after pressing space.I need to map it's coordinates when it's moving.When I use this:
var elem=document.getElementById("ball");
alert(elem.offsetLeft);
It does nothing and additionally it makes whole code in if() block not working.My browser is Chrome.
Here's a whole code:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<style>
#rocket
{
width:50px;
height:50px;
position:absolute;
top:0;left:0;
transition:top 0.4s, bottom 0.4s;
}
#ball
{
width:15px;
height:15px;
position:absolute;
transition:left 0.5s;
}
</style>
<script>
var down=0;
var up=0;
document.onkeydown=function(e){
e=e||window.event;
if(e.keyCode==40)
{
down=down+30;
document.getElementById("rocket").style.top=down+"px";
}
if(e.keyCode==38)
{
down=down-30;
document.getElementById("rocket").style.top=down+"px";
}
if(e.keyCode==32)
{
var c=document.createElement("img");
c.src="http://findicons.com/files/icons/1075/scrap/300/aqua_ball_red.png";
c.id="ball";
c.style.top=down+"px";
document.body.appendChild(c);
setTimeout(function move(){
c.style.left=1200+"px";
},200);
setTimeout(function kill(){
c.style.opacity=0;
},700);
}
};
document.onclick=function(e){
var y=e.pageY;
document.getElementById("rocket").style.top=y+"px";
down=y;
};
</script>
<img src="http://0.static.wix.com/media/a8b510_fc007f8eedd9f304c54ac6d374e3ee0b.gif_1024" id="rocket">
</body>
</html>
The left property only affects elements that have position set to relative, absolute or fixed.
For css left Property you have to mention that position
CSS :
#ball
{
position:absolute;
}
Assign your element with style position: relative or position: absolute before you want to get it's left or top property.
Try this with jQuery in the easy way:
alert($('#ball').offset().left);
or
var elem=document.getElementById("ball");
alert(elem.style.left);

style.top and style.left not working

I have a script written up that when a button is pressed, the formatdialog div gets resized. The problem is that I can't figure out why my javascript code does not work. I am able to resize the width and height, but for whatever reason, the top and left can't be adjusted.
It doesn't make sense to me what could be causing a problem. Firebug doesn't give me any errors. The javascript just resizes the width and height and ignores the top and left attributes. I am guessing that the css properties are causing a problem, I just don't know what.
css:
#formatdialog {
display:none;
left:25%;
top:25%;
width:400px;
height:200px;
position:absolute;
z-index:100;
background:white;
padding:2px;
font:10pt tahoma;
border:1px solid gray
}
Javascript:
function FormatDialogResize(){
var elem = document.getElementById('FormatDialog');
elem.style.top = "10%";
elem.style.left = "10%";
elem.style.width = "600px";
elem.style.height = "500px";
}
I also tried:
function FormatDialogResize(){
var elem = document.getElementById('FormatDialog');
elem.style.top = 10+"%";
elem.style.left = 10+"%";
elem.style.width = "600px";
elem.style.height = "500px";
}
Thanks.
I had a similar problem and discovered that setting .top would not work until after I set the element to "position: absolute" .
Why is you class name missing the pascal casing for the element ID in the classId
#formatdialog {
FormatDialog
You have a typo.
The element id is formatdialog but you are trying to call FormatDialog
var elem = document.getElementById('FormatDialog');
Your code should be like this:
<div id="formatdialog">
</div>
var elem = document.getElementById('formatdialog');
elem.style.top = "10%";
elem.style.left = "10%";
elem.style.width = "600px";
elem.style.height = "500px";
#formatdialog
{
left:25%;
top:25%;
width:400px;
height:200px;
position:absolute;
z-index:100;
padding:2px;
font:10pt tahoma;
border:1px solid gray;
background-color:orange;
}​
If you want to use Pascal casing make sure it is the same in elementId and class
Check this Fiddle

Categories