How to get css animations working in Ember - css

Question

Note: I am using the INSPINIA administrative theme and this question is an extension of the following question: How do I install bootstrap 4 template to Ember web project?
How do I get css animations working in Ember?
I am attempting to get the collapse-able sidebar navigation menu working (see the INSPINIA link here). Currently, I do not see the arrow and the menu is displayed only in expanded form in the <ul class="nav nav-second-level">...</ul> block of code.
In looking at the sample projects and View Source page, there appear to be a lot of add-ons that INSPINIA uses. Do I need to install all of them? Or, do I just need jQuery?
Here is the code for my handlebar file in question.
<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"><i class="fa fa-th-large"></i> <span class="nav-label">Client</span> <span class="fa arrow"></span>
<ul class="nav nav-second-level">
<li>Update Information</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

I'd suggest using Liquid Fire.
Liquid Fire is a toolkit for managing animated transitions in an Ember application.
You can use the transition.js file to manage the duration, direction, timing etc. of CSS transitions in your app.
You may use Ember Animated if you need more control over your animations.