如何让 CSS 动画在 Ember 中工作

Question

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

如何让 CSS 动画在 Ember 中工作？

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

在查看示例项目和View Source 页面时，INSPINIA 似乎使用了很多附加组件。我需要全部安装吗？或者，我只需要 jQuery 吗？

这是我的车把文件的代码。

<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 是一个用于在 Ember 应用程序中管理动画过渡的工具包。

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

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