0

この質問と同様に、親の全幅と高さであるネストされたdivがあります。ただし、他の質問とは異なり、ネストされたdivの変換をアニメーション化するため、position：staticの推奨される修正は適用されません。

以下は私のテストケースです。

HTML：

<div id="theBox">
<div id="innerBox"></div>
</div>​

CSS：

#theBox {
    border: 1px solid black;
    border-radius: 15px;
    width: 100px;
    height: 30px;
    overflow: hidden;
}

#innerBox {
    width: 100%;
    height: 100%;
    background-color: gray;
    -webkit-transition: -webkit-transform 300ms ease-in-out;
    -moz-transition: -moz-transform 300ms ease-in-out;
}

JavaScript：

setTimeout(function () {
    var innerBox = document.getElementById("innerBox");
    var transformText = "translate3d(70px, 0, 0)";
    innerBox.style.webkitTransform = transformText;
    innerBox.style.MozTransform = transformText;
}, 1000);

http://jsfiddle.net/pv2dc/

これはFirefox15.0.1では正常に機能しますが、Safari 6.0.1では、内側のdivが親のdivの湾曲した境界線によってクリップされません。

この問題の回避策はありますか？

4

1 に答える 1

0

興味深いことに、translate3d()2Dtranslate()変換関数を使用する代わりに、遷移の完了後に内部divがクリップされます：http：//jsfiddle.net/pv2dc/1/

したがって、回避策の1つは、トランジションを使用せずに、変換を自分でアニメーション化することです。

CSS：

#theBox {
    border: 1px solid black;
    border-radius: 15px;
    width: 100px;
    height: 30px;
    overflow: hidden;
}

#innerBox {
    width: 100%;
    height: 100%;
    background-color: gray;
}

JavaScript：

(function() {
    var requestAnimationFrame = window.requestAnimationFrame ||
        window.mozRequestAnimationFrame ||
        window.webkitRequestAnimationFrame ||
        window.msRequestAnimationFrame;
    window.requestAnimationFrame = requestAnimationFrame;
})();

setTimeout(function () {
    var start = window.mozAnimationStartTime || Date.now();
    function step(timestamp) {
        var progress = timestamp - start;
        var transformText = "translate(" + (70 * progress / 300) + "px)";
        if (progress >= 300) transformText = "translate(70px)";
        innerBox.style.webkitTransform = transformText;
        innerBox.style.MozTransform = transformText;
        if (progress < 300) {
            window.requestAnimationFrame(step);
        }
    }
    window.requestAnimationFrame(step);
}, 1000);

http://jsfiddle.net/pv2dc/2/

このサンプルでは線形タイミング関数を使用していますが、イーズインアウト関数も使用できます。参照： http： //www.netzgesta.de/dev/cubic-bezier-timing-function.html

于 2012-09-20T22:32:52.087 に答える