Question

我正在Angualar 6应用程序的index.html head标签中使用animate.css库。

l4_0_0.m4a
l4_0_1.m4a
l4_0_2.m4a
l5_0_0.m4a
l5_0_1.m4a
l5_0_2.m4a
l6_0_0.m4a
.
.
.
l11_0_2.m4a

一切正常，我正在这样使用：

l5_0_0.m4a
l5_0_1.m4a
l5_0_2.m4a
l6_0_0.m4a
l6_0_1.m4a
l6_0_2.m4a
l7_0_0.m4a
.
.
.
l12_0_2.m4a

唯一的问题是，动画是从页面加载开始的，而不是在元素可见时开始的。

当用户最终滚动到该元素然后开始其动画时，如何使该元素动画化。

Answer 1

我建议您尝试使用css3-animate-it库。在查看时可以非常轻松地显示动画。看一下这个例子：

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="animations.css" type="text/css">
        <style>
            .box {
                width:400px;
                height:400px;
                background-color:#aaaa00;
                margin:150px auto;
            }
        </style>
    </head>

    <body>
        <div class="animatedParent">
            <div class="animated bounceInDown box"></div>
        </div>

        <div class="animatedParent">
            <div class="animated fadeIn box"></div>
        </div>

        <div class="animatedParent">
            <div class="animated growIn box"></div>
        </div>

        <div class="animatedParent">
            <div class="animated bounceInRight box"></div>
        </div>

        <div class="animatedParent">
            <div class="animated fadeInDown box"></div>
        </div>

        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <script src="css3-animate-it.js"></script>
    </body>
</html>

每个动画只有在它们进入视图后才触发（一旦父“ animatedParent”类进入视图，因为这就是该库的工作方式）。

此库还提供了许多动画，here中可以找到更多信息。

当元素不在页面加载中时，Angular 6 Animate CSS

1 个答案: