8

在我使用 CSStransition或animation包含rotate整个包含的 div 后变得有点模糊，
我读到这是重绘元素的某种副作用，但有没有办法防止它？

.toggle {
    position: absolute;
    width: 36px;
    height: 36px;
    bottom: 7px;
    right: 94px;
    z-index: 200;
    background: transparent url("../img/handle-open.png") no-repeat;

    -webkit-transition: all 1s cubic-bezier(0.91,0.00,1.00,1.00);
       -moz-transition: all 1s cubic-bezier(0.91,0.00,1.00,1.00);
            transition: all 1s cubic-bezier(0.91,0.00,1.00,1.00);
}

.toggle-closed {
    -webkit-transform: rotate(180deg);
       -moz-transform: rotate(180deg);
            transform: rotate(180deg);
}

我试图达到同样的效果animate并得到同样的结果

在此处输入图像描述

更新：我注意到发生了一些奇怪的事情——在 chrome 中，当动画运行时元素变得模糊，当动画停止时它恢复正常，
在 iOS 上却发生了相反的情况——图像在动画时很清晰，但在完成时变得模糊！另一个奇怪的@$$ 错误！？

4

1 回答 1

1

在做动画之后，我已经看到过这样的问题。检查过渡后对象的尺寸，它的大小很可能已经改变了几个点，导致模糊。IE：

过渡前：36x36 过渡后：36.2 x 36.8

于 2012-06-01T20:48:36.883 回答