Блокирует проблему расширения с помощью z-index - PullRequest
Новая
       9

Блокирует проблему расширения с помощью z-index

0 голосов
/ 13 мая 2018

У меня есть обзор блоков, и когда вы нажимаете на один блок, он расширяется. При щелчке за пределами расширенного блока или над символом «x» он изменяется до размера по умолчанию.

Но есть две проблемы, которые я не знаю, как решить.

Когда вы нажимаете на блок с помощью Chrome / Safari, z-index обновляется на миллисекунду слишком поздно и выглядит не очень гладко. (Firefox на MAC в порядке при расширении.)

Когда он развернут и возвращается назад, z-индекс должен быть выше, чем у других блоков. Таким образом, когда он становится нормальным, сайт выглядит намного лучше.

Таким образом, при щелчке следует добавить z-index:2;, а при изменении размера обратно на размер по умолчанию z-index должно быть 1, поэтому оно выше, чем у других (которые равны 0), но, когда другое расширяется, это должно быть самым высоким.

Может кто-нибудь помочь мне с этим? Я бы предпочел использовать магию JS для этого, может быть, встроенный стиль?

Я также сделал jsfiddle, чтобы показать, что я имею в виду. https://jsfiddle.net/fourroses666/sp7vbtok/2/

HTML: 

<div class="grid">    
    <div class="grid-item">
        <div class="g-inner" style="background-image:url(https://placekitten.com/350/350);">
            <div class="g-item"><img src="/some-png-img.png" height="175" width="175" /></div>
            <div class="g-more">Bla bla bla.</div>
            <div class="g-close">x</div>
        </div>  
    </div>
</div>

JS 

$(".grid-item").on("click", function(){
    $(".grid-item").removeClass("active");
    $(this).addClass("active");
});
$(".g-close").on("click", function(e){
    e.stopPropagation();
    $(this).closest(".grid-item").removeClass("active");
});

CSS 

.grid{width:875px; margin:20px auto;}
.grid:after {content:''; display:block; clear:both;}
.grid-item{width:175px; height:175px;}

.g-more{display:none; position:absolute; top:175px; height:175px; width:175px; transition:all 1s ease-in-out; opacity:0; padding:20px;}
.active .g-more{opacity:1; display:block;}

.grid-item{float:left; width:175px; height:175px; background:#ddd; color:#fff;}
.grid-item:before{display:block; padding:0;}
.grid-item-wide, .grid-item-wide .g-inner, .grid-item-wide .g-item{width:350px; height:175px;}

.g-inner{cursor:pointer; overflow:hidden; z-index:1; width:175px; height:175px; transition:all 1s ease-in-out; -webkit-background-size:cover; -moz-background-size:cover; -o-background-size:cover; background-size:cover; background-repeat:no-repeat; background-position:left 50%;}
.active .g-inner{width:350px; height:350px; position:relative; z-index:2; cursor:default;}
.open-left.active .g-inner{margin-left:-175px;}
.open-top.active .g-inner{margin-top:-175px;}

.g-item{width:175px; height:175px; position:relative;}

.g-close{cursor:pointer; position:absolute; right:-50px; bottom:-50px; width:50px; height:50px; line-height:50px; font-size:35px; display:none; opacity:0; text-align:center; transition:all 1s ease-in-out;}
.active .g-close{opacity:1; right:0; top:auto; bottom:0; z-index:5; display:block;}

1 Ответ

0 голосов
/ 13 мая 2018

попробуй использовать insted 

 .active .g-inner {
        width:350px;
        height:350px;

    }

с transform:scale и transform-origin (если вы хотите установить точку поворота x и y в верхнем левом углу) следующим образом: 

 .active .g-inner {
        transform: scale(2);
        transform-origin: left top;

    }

у меня это нормально работает

...