Image seems to ignore transition:all 2s;

Question

</head>
<body>
<script>
var temp;
document.addEventListener("click",(function(e) {
    temp=document.createElement("img")
    temp.src="https://images.freeimages.com/images/large-previews/82d/eastern-rosella-1-1617233.jpg"
    temp.style+="left:0; top:0;"
    temp.style.position+="absolute"
    temp.height="200"
    temp.width="200"
    temp.style.left=e.clientX
    temp.style.top=e.clientY
    temp.style.transition="all 2s"
    document.body.append(temp)
    temp.style.transform="translate(0px, 50px)"
}))
</script>
</body>

This piece of code is meant to create an image at the user's mouse click, that will move it down by 50px, with a transition duration of 2s. However, it seems to ignore the transition property, and teleport down 50px instead without the animation.

I have also added ease 2s to see if the translation of 50px would be delayed by 2 secs, but it ignored that.

I have also tried using transform+= instead of transform=, if that would do anything, but it didn't.

This is the created element:

<img src="https://images.freeimages.com/images/large-previews/82d/eastern-rosella-1-1617233.jpg" height="200" width="200" style="top: 316px; position: absolute; left: 849px; transition: all 2s; transform: translate(0px, 50px);">

The transition property is as it should be, but it has no effect.

How do I make the image element move smoothly, instead of changing position?

did you set any default rules for img tag ? alike `img{left:0:top:0;transform:translate(0,0);/* ...*/}` so transition has 2 numbers. 1 to start from and another to go to ? — G-Cyrillus, Aug 27 '23 at 19:16

score -1 · Accepted Answer · answered Aug 27 '23 at 20:32

-1

Add an img.style.transform to the img.onload event:

document.addEventListener('click', event =>  {
  const img = document.createElement('img');
  img.src = 'https://images.freeimages.com/images/large-previews/82d/eastern-rosella-1-1617233.jpg';
  img.style.cssText = `
    left: ${event.clientX}px;
    top: ${event.clientY}px;
    position: absolute;
    width: 200px;
    height: 200px;
    transition: 2s;
  `;
  document.body.append(img)
  img.onload = () => img.style.transform = 'translateY(50px)';
})

answered Aug 27 '23 at 20:32

imhvost

4,750
2
8
10

I implemented the use of `onload()` and it worked! Also, I think I forgot to add that I do not use jQuery in my question. – 084m4_Pri5m Aug 28 '23 at 19:42
@084m4_Pri5m beware this will fail in Firefox and Safari when the image is cached already. Instead preload once your image even before the click, and then use the way described in [this answer](https://stackoverflow.com/a/55137322/3702797). (Note that in Chrome it seems to work only because you're in a click event handler, which is tied to animation frame there, from another task that wouldn't work there either). – Kaiido Aug 29 '23 at 01:21

Raymond Natio · Answer 2 · 2023-08-29T00:50:10.517

This code give you ability to move the image independently to where you click.

const f = document.getElementById("img");
document.addEventListener(
  "click",
  (ev) => {
    f.style.transform = `translateY(${ev.clientY - 25}px)`;
    f.style.transform += `translateX(${ev.clientX - 25}px)`;
  },
  false,
);

img {
  width: 35%;
  transition: all 2s;
}

  <img id="img" src="https://images.freeimages.com/images/large-previews/82d/eastern-rosella-1-1617233.jpg">

If you want it to always move to 50px below, then just change the js to this code below.

EDITED

const f = document.getElementById("img");
document.addEventListener(
  "click",
  (ev) => {
    f.style.transform = `translateY(50px)`;
    f.style.transform += `translateX(0)`;
  },
  false,
);

img {
      width: 35%;
      transition: all 2s;
    }

<img id="img" src="https://images.freeimages.com/images/large-previews/82d/eastern-rosella-1-1617233.jpg">

It is working fine. And of course you need to have the js and css complete in the code too. Please have a look.

For the first one, it seemed to find `$` as an `Invalid or Unexpected token`, and I would like the image to always move 50px below (like the second piece of code). For the second one, I edited the code to this, as I found multiple errors: `var f; document.addEventListener("click",(ev) => { f = document.getElementById("asd"); f.style.transform = "translate(50px)"; },false,);` But the change is still instant. — 084m4_Pri5m, Aug 28 '23 at 19:43

Image seems to ignore transition:all 2s;

2 Answers2