CSS / JS如果由于从流中删除了先前的元素而移动了图像，是否可以转换图像的位置？

时间：2018-07-24 23:28:50

标签： javascript css transition

因此，我正在尝试像此link中那样实现图库（点击实时演示并向下滚动）。当用户单击按钮时，不在该组中的图像应缩小并消失，而其他图像应移动以填补空白。目前，我正在使用网格保存图像。每个图像都是静态放置的，但是JS根据其offsetTop和OffsetLeft设置其顶部和左侧。为了隐藏每个图像，我将其位置设置为绝对，以将其从流中移除，并设置transform：scale（0），其中transition上的过渡效果完美，并且保留的图像重定位到网格中的正确位置。但是他们显然是瞬间完成的，这不是我追求的结果。我真的很想为这个项目坚持使用基本的HTML CSS JS，因为我学到了很多东西。我只想知道是否缺少一个简单的解决方案，或者它会变得非常复杂？ Here是我的当前版本，因此您可以看到我的位置。

以下是一些试图解决该问题的JS：

//adds galleryButtonClicked function to all gallery buttons
(function() {
    let galleryButtons = document.getElementsByClassName("gallery-button");
    for (let i = 0; i < galleryButtons.length; i++)
    {
        galleryButtons[i].addEventListener("click", galleryButtonClicked);
    }
})();

//adds top and left to each gallery image that matches it's current position. Declared and called
//seperately as may need to recall on window resize
function setImageAbsCoords() {
    let images = document.getElementsByClassName("gallery-image");
    for (let image of images)
    {
        let y = image.offsetTop + "px";
        let x = image.offsetLeft + "px";

        image.style.top = y;
        image.style.left = x;
    }
}
setImageAbsCoords();

function galleryButtonClicked() {
    //show only group images
    if (this.dataset.group == 0)
        showAllGalleryImages();
    else
        showGalleryImagesGroup(this.dataset.group);
}

function showAllGalleryImages() {
    let images = document.getElementsByClassName("gallery-image");
    for (let image of images)
    {
        showGalleryImage(image);
    }
}

function showGalleryImagesGroup(group) {
    let images = document.getElementsByClassName("gallery-image");
    for (let image of images)
    {
        if (image.dataset.group === group)
            showGalleryImage(image);
        else
            hideGalleryImage(image);
    }
}

function showGalleryImage(image) {
    image.style.position = "static";
    image.style.transform = "scale(1)";
}

function hideGalleryImage(image) {
    image.style.position = "absolute";
    image.style.transform = "scale(0)";

}

和相应的CSS：

gallery-image-container {
    display: grid;
    margin: 0 auto;
    padding: 3rem 0;
    width: 80%;
    grid-template-columns: repeat(4, 170px);
    grid-template-rows: repeat(3, auto);
    gap: 20px;
    justify-content: center;
}

.gallery-image {
    transition : transform 400ms ease-in-out;
}

最后，所讨论的html：

<div class="grid gallery-buttons">
                <button class="button gallery-button active" data-group="0">All</button>
                <button class="button gallery-button" data-group="1">Lorem Ipsum</button>
                <button class="button gallery-button" data-group="2">Dolor Sit</button>
                <button class="button gallery-button" data-group="3">adipiscing Elit</button>
            </div>
            <div class="grid gallery-image-container">
                <img class="gallery-image" data-group="1" src="https://picsum.photos/170/170?image=0" alt="random demo-gallery-pic">
                <img class="gallery-image" data-group="3" src="https://picsum.photos/170/170?image=11" alt="random demo-gallery-pic">
                <img class="gallery-image" data-group="1" src="https://picsum.photos/170/170?image=15" alt="random demo-gallery-pic">
                <img class="gallery-image" data-group="1" src="https://picsum.photos/170/170?image=18" alt="random demo-gallery-pic">
                <img class="gallery-image" data-group="3" src="https://picsum.photos/170/170?image=23" alt="random demo-gallery-pic">
                <img class="gallery-image" data-group="2" src="https://picsum.photos/170/170?image=27" alt="random demo-gallery-pic">
                <img class="gallery-image" data-group="2" src="https://picsum.photos/170/170?image=30" alt="random demo-gallery-pic">
                <img class="gallery-image" data-group="1" src="https://picsum.photos/170/170?image=31" alt="random demo-gallery-pic">
                <img class="gallery-image" data-group="3" src="https://picsum.photos/170/170?image=38" alt="random demo-gallery-pic">
                <img class="gallery-image" data-group="2" src="https://picsum.photos/170/170?image=42" alt="random demo-gallery-pic">
                <img class="gallery-image" data-group="2" src="https://picsum.photos/170/170?image=55" alt="random demo-gallery-pic">
                <img class="gallery-image" data-group="1" src="https://picsum.photos/170/170?image=69" alt="random demo-gallery-pic">
            </div>

1 个答案:

答案 0 :(得分：0)

好，所以我实际上已经弄清楚了。我已经included a jsfiddle对其进行了演示。只需在关闭转换的情况下将图像转换回其初始位置，然后再将其设置为不转换即可。感谢所有花时间阅读本文的人。

//adds galleryButtonClicked function to all gallery buttons
(function() {
    let galleryButtons = document.getElementsByClassName("gallery-button");
    for (let i = 0; i < galleryButtons.length; i++)
    {
        galleryButtons[i].addEventListener("click", galleryButtonClicked);
    }
})();

//adds top and left to each gallery image that matches it's current position. Declared and called
//seperately as may need to recall on window resize
function setImageAbsCoords() {
    let images = document.getElementsByClassName("gallery-image");
    for (let image of images)
    {
        //for later do not update if already set to absolute position
        if (image.style.position !== "absolute")
        {
            let y = image.offsetTop + "px";
            let x = image.offsetLeft + "px";

            image.style.top = y;
            image.style.left = x;
        }
    }
}
setImageAbsCoords();

function galleryButtonClicked() {
    //gather images old positions
    let images = document.getElementsByClassName("gallery-image");
    console.log(images.length);
    for (let image of images) 
    {
        image.dataset.oldposx = image.offsetLeft;
        image.dataset.oldposy = image.offsetTop;
    }

    //show only group images
    if (this.dataset.group == 0)
        showAllGalleryImages();
    else
        showGalleryImagesGroup(this.dataset.group);

    let staticImages = Array.from(images).filter(img => img.style.position === "static");
    transitionRemainingImagesToNewPos(staticImages);

}
function showAllGalleryImages() {
    let images = document.getElementsByClassName("gallery-image");
    for (let image of images)
    {
        showGalleryImage(image);
    }
}

function showGalleryImagesGroup(group) {
    let images = document.getElementsByClassName("gallery-image");
    for (let image of images)
    {
        if (image.dataset.group === group)
            showGalleryImage(image);
        else
            hideGalleryImage(image);
    }
}

function showGalleryImage(image) {
    //set wasHidden flag for transitionRemainingImagesToNewPost to reset scale before turning off transitions
    if (image.style.position === "absolute")
        image.dataset.wasHidden = true;
    else
        image.dataset.wasHidden = false;

    image.style.position = "static";
    image.style.transform = "scale(1)";
}

function hideGalleryImage(image) {
    image.style.position = "absolute";
    image.style.transform = "scale(0)";
}

function transitionRemainingImagesToNewPos(images) {
    for (let image of images)
    {
        //turn off transitions
        image.classList.add("no-transition");
        //move back to old position before gallery reshaped after button press
        diffx = image.dataset.oldposx - image.offsetLeft;
        diffy = image.dataset.oldposy - image.offsetTop;
        image.style.transform = `translate(${diffx}px, ${diffy}px)`;
        //set scale back to 0 if had been hidden before now
        if (image.dataset.wasHidden === 'true')
            image.style.transform += ` scale(0)`;

        image.offsetHeight; //force a redraw
        image.classList.remove("no-transition");
        image.style.transform = "none";
    }
    //update top and left to new position
    setImageAbsCoords();
}
相关问题
最新问题