css - 如何在 Ember 中使用 css 动画

Question

注意:我使用的是 INSPINIA 管理主题，这个问题是以下问题的延伸:How do I install bootstrap 4 template to Ember web project?

如何在 Ember 中使用 css 动画？

我正在尝试使可折叠的侧边栏导航菜单正常工作(请参阅 INSPINIA 链接 here)。 目前，我没有看到箭头，菜单仅以扩展形式显示在 <ul class="nav nav-second-level">...</ul> 中。代码块。

在查看示例元素和View Source页面上，似乎有很多 INSPINIA 使用的附加组件。我需要安装所有这些吗？或者，我只需要 jQuery 吗？

这是我的相关 Handlebars 文件的代码。

<nav class="navbar-default navbar-static-side" role="navigation">
    <div class="sidebar-collapse">
        <ul class="nav metismenu" id="side-menu">
            {{#if session.isAuthenticated}}
                <li class="active"><a href="#"><i class="fa fa-th-large"></i> <span class="nav-label">Client</span> <span class="fa arrow"></span></a>
                    <ul class="nav nav-second-level">
                        <li><a href="#">Update Information</a></li>
                        <li>{{#link-to "clients.change-password"}}Change Password{{/link-to}}</li>
                        <li><a href="#" onclick={{action "logout"}}>Logout</a></li>
                    </ul>
                </li>
            {{else}}
                <li>{{#link-to "clients.login"}}Login{{/link-to}}</li>
                <li>{{#link-to "clients.register"}}Register{{/link-to}}</li>
            {{/if}}

            <li>{{#link-to "misc.about"}}About{{/link-to}}</li>
            <li>{{#link-to "misc.contactus"}}Contact Us{{/link-to}}</li>
        </ul>
    </div>
</nav>

Answer 1

我建议使用 Liquid Fire .

Liquid Fire is a toolkit for managing animated transitions in an Ember application.

您可以使用 transition.js 文件来管理应用中 CSS 过渡的持续时间、方向、时间等。

您可以使用 Ember Animated如果您需要对动画进行更多控制。