文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
社区首页 >问答首页 >CSS/JS如果图像由于先前的元素从流中删除而移动，我可以转换图像的位置吗？

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

Stack Overflow用户
提问于 2018-07-25 07:28:50
回答 1查看 40关注 0票数 -2

因此，我正在尝试实现一个画廊，就像这个link (点击实况演示并向下滚动)。当用户单击一个按钮时，不在该组中的图像应该缩小并消失，而其他图像应该移动以填补空白。目前，我正在使用网格来保存图像。每个图像都是静态定位的，但JS根据它的offsetTop和OffsetLeft设置了顶部和左侧。为了隐藏每个图像，我将它的位置设置为绝对，以将其从流中移除，并设置transform: scale(0)，并在transform上设置一个能完美工作的过渡，而剩下的图像将重新定位到网格中的正确位置。然而，他们显然是在瞬间做到这一点，这不是我想要的结果。我真的很想坚持这个项目的基本HTML CSS JS，因为我正在学习它很多。我只想知道我是否缺少一个简单的解决方案，或者它会变得非常复杂？Here是我目前的版本，所以你可以看到我在哪里。

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

代码语言：javascript
复制
//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：

代码语言：javascript
复制
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：

代码语言：javascript
复制
<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>
javascript
css
transition
EN

回答 1

Stack Overflow用户

发布于 2018-07-25 09:13:20

好的，我真的解决了这个问题。我的included a jsfiddle演示了它的正常工作。只需将图像转换回它们的初始位置，关闭transform，然后将translate设置为none并重新打开。感谢所有花时间阅读这篇文章的人。

代码语言：javascript
复制
//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();
}
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/51508919

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2024 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号 | 京公网安备号11010802020287

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档