Why the element gets back to first position after animate?

user_15036648 0
Viewed 38

I'm using the animate method for my image created in JavaScript to slide into the .slider-wrapper, it does slide but it jumps back to the first position set for it before the animate method which is not what I want, I want the image to animate and stay there at the new position, not get back to the first position it came from,

What modification should I take for this approach?

document.addEventListener('DOMContentLoaded', function (event) {
    let sliderWrapper = document.getElementsByClassName('slider-wrapper')[0];
    let sliderWrapperWidth = sliderWrapper.offsetWidth;
    class Image {
        sliderWrapper = document.getElementsByClassName('slider-wrapper')[0];
        constructor(_src) {
            this.src = _src;
            this.width = window.getComputedStyle(sliderWrapper).width;
            this.appear()
        }
    }
    Image.prototype.appear = function () {
        let img = document.createElement('img');
        img.setAttribute("src", this.src);
        img.style.width = this.width;
        img.classList.add('img');
        sliderWrapper.appendChild(img);
        img.style.left = `${sliderWrapperWidth}px`;
        img.onload = function() {
            sliderWrapper.style.height = `${img.height}px`;
        }
        img.animate({left: 0}, 800);
    }
        let instance = new Image(`https://via.placeholder.com/150`);
});
*{
            padding: 0;
            margin: 0;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
        }
        .slider-wrapper{
            position: relative;
            max-width: 150px;
            margin: 70px auto;
            border: 2px solid #ff0000;
            box-sizing: content-box;
        }
        img{
            position: absolute;
            display: block;
        }
<div class="slider-wrapper">
</div>

methods animation class javascript
1 Answers

The animation needs doesn't know what to do when the animation is finished. You can solve this by adding a fill property to the animation options.

Set the value of the fill to forwards. This will tell the animation that the final state of the animation should be used as the style from now on.

To improve your animations use the CSS transform property instead of left. Left will cause the whole page to be rerendered on every pixel it changes. Transforms are optimized and only rerender the part of the page that changes, using way less resources than the alternative, and thus being more performant.

document.addEventListener('DOMContentLoaded', function (event) {
    let sliderWrapper = document.getElementsByClassName('slider-wrapper')[0];
    let sliderWrapperWidth = sliderWrapper.offsetWidth;

    class Image {
        sliderWrapper = document.getElementsByClassName('slider-wrapper')[0];
        constructor(_src) {
            this.src = _src;
            this.width = window.getComputedStyle(sliderWrapper).width;
            this.appear()
        }
    }

    Image.prototype.appear = function () {
        let img = document.createElement('img');
        img.setAttribute("src", this.src);
        img.style.width = this.width;
        img.classList.add('img');
        sliderWrapper.appendChild(img);
        img.style.transform = `translate3d(${sliderWrapperWidth}px, 0, 0)`;
        
        img.onload = function() {
            sliderWrapper.style.height = `${img.height}px`;
        }
        
        img.animate({transform: 'translate3d(0, 0, 0)'}, {
          duration: 800,
          fill: 'forwards'
        });
    }
        
    let instance = new Image(`https://via.placeholder.com/150`);
});
*{
            padding: 0;
            margin: 0;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
        }
        .slider-wrapper{
            position: relative;
            max-width: 150px;
            margin: 70px auto;
            border: 2px solid #ff0000;
            box-sizing: content-box;
        }
        img{
            position: absolute;
            display: block;
        }
<div class="slider-wrapper">
</div>

user_116196470
Related