时间戳

首页 > 解决方案 > 如何让 CSS 动画在 Ember 中工作

css - 如何让 CSS 动画在 Ember 中工作

问题描述

注意：我使用的是 INSPINIA 管理主题，这个问题是以下问题的扩展：如何将 bootstrap 4 模板安装到 Ember Web 项目？

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

我正在尝试使可折叠的侧边栏导航菜单正常工作（请参阅此处的 INSPINIA 链接）。目前，我没有看到箭头，并且菜单仅在<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>

标签： csstwitter-bootstrapember.jsbootstrap-4ember-cli

解决方案

我建议使用Liquid Fire。

Liquid Fire 是一个用于管理 Ember 应用程序中动画过渡的工具包。

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

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

推荐阅读