Переход не работает при назначении в JavaScript - PullRequest
Новая
       7

Переход не работает при назначении в JavaScript

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

У меня проблема в том, что когда я назначаю свойство margin в моем JavaScript для элемента, эффекты перехода отсутствуют.Я уже искал подобные вопросы и уже пробовал это со слушателем события.Я также попробовал это с setTimeout, и это работало, но я не хочу, чтобы это работало.Это должен быть плавный переход, когда изображение, которое всплывает, выше текущего и всплывает со стороны, где вы нажали кнопку.

В моем редакторе код работает, но без переходов. 

var counter = 0;
var slides = [];
function scrollThrough(n) {
		alert("sd");
    slides = document.getElementsByClassName("img");
    if(counter + n < 0){
        counter = slides.length-1;
        slides[counter].style.transition = "none";
        slides[counter].style.marginLeft="100%";
        for(i = 0 ; i< slides.length ;i++){
            slides[i].style.zIndex = i;
        }
        slides[counter].style.transition = "all 0.5s linear";
        slides[counter].style.marginLeft ="0";
    }
    else if(counter + n > slides.length-1){
        counter = 0;
        slides[counter].style.transition = "none";
        slides[counter].style.marginLeft="-100%";
        for(i = 0 ; i< slides.length ;i++){
            slides[i].style.zIndex = slides.length-i;
        }
        slides[counter].style.transition = "all 0.5s linear";
        slides[counter].style.marginLeft ="0";
    }
    else{
        counter += n;
        slides[counter].style.transition = "none";
        slides[counter].style.marginLeft= (-n)*100+"%";
        slides[counter].style.zIndex = slides.length;
        slides[counter-n].style.zIndex = slides.length-1;
        for(i = 0 ; i< slides.length-2 ;i++){
            if(i == counter || i == counter-n){
            }
            else{
               slides[i].style.zIndex = i;
            }
        }
        slides[counter].style.transition = "all 0.5s linear";
        slides[counter].style.marginLeft ="0";
    }
}
#newsline{
    position: relative;
    padding-top: 60px;
    width: 100%;
    height: 400px;

}

.img{
    display: block;
    position: absolute;
    height: inherit;
    width: inherit;
    transition:all 0.5s linear;
}

#newsline a img{
    height: 400px;
    width: 100%; 
}

.move{
    z-index: 3;
    width: 100px;
    height: 100px;
    display: table;
    border-radius: 50px;
    margin-top: 150px;
    cursor: pointer;
    position: absolute;
    background-color: rgb(255, 255, 255,0.25) ;
}


.move:hover{
    background-color: rgb(255, 255, 255,0.6);
}

.move p{
    height: 100%;
    text-align: center;
    vertical-align: middle;
    display: table-cell;
    color: rgb(250, 255, 255,0.7);
    font-size: 250%;
    background-color: none;
}

.move p:hover{
    color: darkslategrey;
}


.next{
    right: 6%;
}

.previous{
    left: 6%;
}

.one{
    z-index: 2;
}

.two{
    z-index: 1;
}
<body>
    <div id="newsline" >
            <div class="move next" onclick="scrollThrough(1)"><p>⮚</p></div>
            <div class="move previous" onclick="scrollThrough(-1)"><p>⮘</p></div>
            <a href="" class="img one"><img     src="https://www.planwallpaper.com/static/images/8ccb4ec4225b290726ae9be975220ff4.jpg"></a>
            <a href="" class="img two"><img src="https://www.planwallpaper.com/static/images/4362856-bleach-wallpaper-hd.jpg"></a>
</div>
</body>
...