Question

我有一个旋转-90度的文本元素，当用户点击它时需要左右翻译。无论出于何种原因，它在移动时会摇摆不定。我在Chrome上只遇到了这个问题。

＆＃13;

$(document).ready(function() {
    $('.toggle').click(function() {
        $(this).toggleClass('in').toggleClass('out');
    });
});

＆＃13;

.toggle {
    width: 100px;
    height: 30px;
    background-color: blue;
    color: white;
    text-align: center;
    padding-top: 10px;
    font-size: 25px;
    transform: rotateZ(-90deg);
    position: absolute;
    
    top: 30px;
    
    transition: all 1s ease;

}

.toggle.in {
    margin-left: -38px
}
.toggle.out {
    margin-left: 50px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='toggle in'>
    Click me
</div>

＆＃13;

有没有人有任何建议让它变得更流畅？

Answer 1

添加此

.toggle {
    -webkit-backface-visibility: hidden;
}

不再晃动！

http://jsfiddle.net/g97bo56k/2/

Chrome上的旋转文字在动画时会抖动

1 个答案: