Question

我想创建一个类似于http://google.com/photos的转换。点击Go Go Google Photos。如果单击照片，您将看到照片从当前容器（缩略图）过渡到中心，并且屏幕背面变黑。当我们关闭预览时，照片会转换回缩略图容器。你如何使用CSS和Jquery实现这样的转换？我尝试在CSS中这样做，但我只能让照片从页面中心过渡到向用户显示其全屏而不是照片缩略图所在的位置。

这是我到目前为止所拥有的：

@keyframes fadeInScale {
    0%{
        opacity:0;
        transform: scale(0.5);
    }
    100%{
        opacity:1;
        transform: scale(1);
    }
}

@keyframes fadeOutScale {
    0%{
        opacity:1;
        transform: scale(1);
    }
    100%{
        opacity:0;
        transform: scale(0.5);
    }
}

.overlay {
    position: fixed;
    width: 100%;
    top: 100%;
    left: 0px;
    height: 0;
    z-index: 500;
    overflow: auto;
    transition: all 0.4s;

    &.show {
        top: 0px;
        height: 100%;
    }
}


.fade-scale-in {
    display: block;
    animation: fadeInScale 0.3s 1 ease-out;
}

.fade-scale-out {
    display: block;
    animation: fadeOutScale 0.3s 1 ease-out;
}

这是html

当我点击带有图片的div时，我将课程fade-scale-in添加到全屏显示图片的叠加层。图像以全屏预览叠加显示。当您退出预览叠加层时，我会添加课程fade-scale-out并将课程fade-scale-in移至覆盖图片，以全屏显示图片。

如何创建一个CSS转换，其中图像缩小缩略图？

0 个答案: