0

我需要一个动画 gif 来显示，所以我将其设置为 css 背景，但它不会一直显示。

发生的事情是在 ( . 宝丽来 ) 的捏合时，我缩放 ( .poaroid) 的高度。现在，我尝试在比例小于或等于 0.42 时触发这个动画 gif 噗动画。换句话说，当捏合导致 .polaroid 比其原始尺寸小 42% 或更少时。

因此，如果您在多点触控设备上访问此 URL：https ://googledrive.com/host/0BwJVaMrY8QdcTW9BMHg4b0lPUDA/index.html

然后捏住宝丽来卡片 (.polaroid)，它们会变小，变得足够小，然后替换为 ，但动画不会一直发生。为什么不？

这是我的js：

function transform(e){
    var cssScale = "scaleY("+ scaleFactor +")";
    element.css({
        webkitTransform: cssScale,
        webkitTransformOrigin: cssOrigin,
        transform: cssScale,
        transformOrigin: cssOrigin,
    });
    if(scaleFactor <= 0.42){
        $(element).replaceWith('<div class="poof"></div>');
        $('.poof').css('height', itsHeight).css('width', itsWidth).css('background', 'transparent url(poof.gif?v='+time+') center no-repeat');
        time++;
        setTimeout(function(){
            $('.poof').remove();
        }, 1500);
    }
}

如果<div class="poof"></div>缩小到 42% 或更少，则替换 .polaroid；然而，它的背景（poof 动画 gif ）不会每次都显示，即使 jQuery 每次都将它写为 css 背景。

4

0 回答 0