Question

这个JQuery动画看起来非常不稳定，我可以解决它吗？如果没有，我怎么用CSS来做呢？也许我使用JQuery来编辑CSS？

<h1>Test</h1>

 <button onclick="anim()">Start Animation</button>

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js" charset="utf-8"></script>


function anim() {
    $("h1").animate({fontSize: '50px'});
}

h1 {
  font-size: 30px;
}

This is the example code

Here's the project (you can also go to j0rdan.me)

Answer 1

使用CSS3，您可以使用过渡来设置字体大小的动画：

h1 {
  font-size: 30px;
    transition: font 1s ease;
}
h1.bigger {
    font-size:50px;
}

小提琴：https://jsfiddle.net/z6ztfgcg/3/

但是对我而言，你的例子中的javascript看起来并不那么糟糕。

Answer 2

您可以使用css为html添加简单的动画：

.animClass {
    transition: 1000;
    font-size: 50px;
}

（转换指定动画的持续时间，以毫秒为单位）

然后在需要动画时添加animClass：

function anim(){ 
    document.getElementsByTagName("h1").classList.add("animClass");
}

或者在jQuery中：

function anim(){
    $("h1").addClass("animClass");
}

我目前正在使用手机，所以我无法检查它是否正常工作。如果出现进一步的问题，请通知我。

Answer 3

如果你只想使用CSS，那么试试这个

h1 {
    -webkit-transition: all 1.5s ease;
    -moz-transition: all 1.5s ease;
    -ms-transition: all 1.5s ease;
    transition: all 1.5s ease;
}

    h1:hover {
        -webkit-transform: scale(1.5); /* Safari and Chrome */
        -moz-transform: scale(1.5); /* Firefox */
        -ms-transform: scale(1.5); /* IE 9 */
        -o-transform: scale(1.5); /* Opera */
        transform: scale(1.5);
    }

Answer 4

动画为“波涛汹涌”的原因有几个

动画结构属性（例如font-size）通常不稳定
由于结构正在发生变化，动画元素周围的元素也会受到影响
jQuery动画不如css动画那么流畅

我建议使用css使用jQuery而不是transform: scale(1.5)制作动画，因为这不会影响周围的元素并提供更流畅的动画。

h1 {
    font-size: 30px;
    transition: all 0.4s ease;
}
h1.larger {
    transform: scale(1.5);
}

如果这是不可能的，并且您想要为font-size设置动画，我建议将line-height设置为最终动画大小并具有固定边距。这有望防止周围元素受到影响。

h1 {
    font-size: 30px;
    transition: all 0.4s ease;
    line-height: 50px; // Matches end animation size
    margin: 20px 0;
}

h1.larger {
    font-size: 50px;
}

两种解决方案的工作示例：

https://jsfiddle.net/z6ztfgcg/4/

Answer 5

动画字体大小将始终不稳定，因为转换将跳过关键帧。最好的方法是使用CSS3过渡，但有规模。这样可以确保您假装的动画流畅。

<button onclick="anim()">Start Animation</button>
<h1 class="title">Test</h1>
<style>

    .title {
        position: absolute;
        transform: scale(1);
        transform-origin: 0 0;
        -moz-transform-origin: 0 0;
        transition: all 5s;
        font-size: 30px;
    }
    .title.animate {
        transform: scale(2);
    }


</style>
<script>
    function anim() {
        $('h1').addClass('animate');
    }

</script>

然后，您可以决定转换的秒数并更改比例因子。（在这种情况下，我放5秒和原始大小的2倍）

Answer 6

我的结局似乎并不那么糟糕。您可以尝试将transform: translateZ(0);添加到h1 CSS类：https://jsfiddle.net/z6ztfgcg/3/

这个技巧在现代桌面和移动浏览器中触发了GPU加速，这应该可以解决问题。有很多其他方法可以完成类似here的任务。

我该如何修复这个JQuery动画，以免它不稳定？

6 个答案: