動態添加變換 - 在最後恢復到原始值

Question

我想動態添加一個transform: translate3d來移動一個div，但是在變換結束時，div會恢復到原始位置。我正在添加一個新的樣式表並使用insertRule()。任何想法可能導致這種情況？

這裏是a fiddle：

slideshow = (function() { 
    function slideshow() { 
    var _this = this; 
    this.divMiddle; 
    this.divLarge = []; // holds full sized image 
    this.largeSize = []; 
    this.slide = -1; 
    this.oldSlide = -1; 
    this.img = []; 

    this.divMiddle = document.createElement("div"); 
    this.divMiddle.id = "divMiddle"; 
    this.divMiddle.style.position = "relative" 
    this.divMiddle.style.width = "500px"; 
    this.divMiddle.style.height = "400px"; 
    this.divMiddle.style.border = "1px solid black"; 
    document.body.appendChild(this.divMiddle); 
    document.getElementById("next").addEventListener("click", function() { 
     _this.transitionSlides(1) 
    }); 
    document.getElementById("prev").addEventListener("click", function() { 
     _this.transitionSlides(-1) 
    }); 

    this.oldSlide = -1; 
    this.slide = -1; 
    this.transitionSlides(1); 
    } 

    // transition between slides - fading new one in and old one out 
    slideshow.prototype.transitionSlides = function(direction) { 
    // if not the first one loaded, will do transition 
    var begin, end; 
    this.oldSlide = this.slide; 
    this.slide += direction; 
    if (this.slide > this.oldSlide) { 
     this.createImage(); 
    } 
    if (CSSRule.KEYFRAMES_RULE) { 
     var prefix = "" 
    } else if (CSSRule.WEBKIT_KEYFRAMES_RULE) { 
     var prefix = "-webkit-" 
    } 
    var style = document.createElement("style"); 
    document.head.appendChild(style); 

    // fade out the old slide 
    if (this.oldSlide >= 0) { 
     // fade(this.divLarge[this.oldSlide], 1, .1, 20);  
     this.divLarge[this.oldSlide].style.opacity = ".3"; 

     var oldMargin = (parseInt(this.divMiddle.style.width) - parseInt(this.largeSize[this.oldSlide].displayWidth))/2; 
     begin = 0; 
     if (direction == 1) { 
     // next 
     // move existing slide from left to right 
     end = (parseInt(this.largeSize[this.oldSlide].displayWidth) + oldMargin); 
     } else { 
     // prev 
     // move existing slide from right to left 
     end = -(parseInt(this.largeSize[this.oldSlide].displayWidth) + oldMargin + 1); 
     } 
     var rule = "@" + prefix + "keyframes moveOld {" + 
     "0% {" + prefix + "transform: translate3d(" + begin + "px, 0, 0); }" + 
     "100% {" + prefix + "transform: translate3d(" + end + "px, 0, 0); }" + 
     "}"; 
     style.sheet.insertRule(rule, 0); 

     var rule2 = "#" + this.divLarge[this.oldSlide].id + "{" + prefix + "animation: moveOld 3s linear" + "}"; 
     style.sheet.insertRule(rule2, 0); 

    } 
    // fade in the new slide 
    //fade(this.divLarge[this.slide], .1, 1, 20); 
    this.divLarge[this.slide].style.opacity = "1"; 
    this.divLarge[this.slide].style.display = "block"; 

    var margin = (parseInt(this.divMiddle.style.width) - parseInt(this.largeSize[this.slide].displayWidth))/2; 
    begin = 0; 
    if (this.oldSlide == -1) { 
     // first slide - don't move 
     this.divLarge[this.slide].style.left = margin + "px"; 
     end = 0; 
    } else if (direction == 1) { 
     // next 
     // move new slide from left to right 
     // move to starting position 
     this.divLarge[this.slide].style.left = (oldMargin - parseInt(this.largeSize[this.slide].displayWidth)) + "px"; 
     end = (-oldMargin + parseInt(this.largeSize[this.slide].displayWidth) + margin); 
    } else { 
     // prev 
     // move new slide from right to left 
     // move to starting position 
     this.divLarge[this.slide].style.left = (oldMargin + parseInt(this.largeSize[this.oldSlide].displayWidth)) + "px"; 
     end = +oldMargin - (parseInt(this.largeSize[this.slide].displayWidth) + margin); 
    } 
    var rule = "@" + prefix + "keyframes moveNew {" + 
     "0% {" + prefix + "transform: translate3d(" + begin + "px, 0, 0); }" + 
     "100% {" + prefix + "transform: translate3d(" + end + "px, 0, 0); }" + 
     "}"; 
    style.sheet.insertRule(rule, 0); 

    var rule2 = "#" + this.divLarge[this.slide].id + "{" + prefix + "animation: moveNew 2s linear" + "}"; 
    style.sheet.insertRule(rule2, 0); 
    } 

    slideshow.prototype.createImage = function() { 
    var img = document.createElement("img"); 
    var from = 100; 
    var to = 300; 
    var width = Math.floor(Math.random() * (to - from + 1) + from); 
    var height = Math.floor(Math.random() * (to - from + 1) + from); 
    img.src = "http://placehold.it/" + width + "x" + height; 
    img.style.height = height; 
    img.style.width = width; 
    this.img.push(img); 

    var div = document.createElement("div"); 
    div.id = "slideshow-large-" + (this.img.length - 1) 
    div.style.display = "none"; 
    div.style.top = ((parseInt(this.divMiddle.style.height) - height)/2) + "px"; 
    div.style.position = "absolute"; 
    div.style.width = width + "px"; 
    div.className = "slideshow-large"; 
    div.appendChild(img); 

    this.divLarge.push(div); 
    this.largeSize.push({ 
     displayWidth: width, 
     displayHeight: height 
    }); 
    this.divMiddle.appendChild(div); 
    } 

    return slideshow; 

})(); 

var ss = new slideshow(); 

的樣式和HTML

<div id="next">Next Slide</div> 
<div id="prev">Prev Slide</div> 


#divMiddle { 
    width: 600px; 
    height: 600px; 
    display: flex; 
    position: relative; 
    top: 0px; 
    left: 0px; 
    overflow: hidden; 
} 

div.slideshow-large { 
    overflow: hidden; 
    top: 0; 
    position: absolute; 
} 

div.slideshow-large img { 
    display: block; 
} 

div.slideshow-large span { 
    position: absolute; 
    top: 0; 
    left: 0; 
    z-index: 1070; 
} 

Answer 1

您應該添加animation-fill-mode: forwards到你的代碼，它會保持在動畫結束值。對於你的代碼示例，它會是這樣的：

... 
var rule2 = "#" + this.divLarge[this.slide].id + "{" + prefix + "animation: moveNew 2s linear forwards" + "}"; 
...