如何在Angular 2中干净地实现这个动画幻灯片组件？

Question

我刚刚开始使用Angular 2，我正在努力干净地实现滑入式组件。

基本上我想在我的网站右侧放置一些滑入式图标，只要我将它们悬停在那里就会展开。

首先，这是一个Plunker demo。

即使<li class="icon">元素的固定宽度为28px，我也只是不知道如何“滑入”<ng-content select=".slide-in-text"></ng-content>部分，因为它的宽度取决于其内容。 transformX()是基于百分比的...

我也愿意接受纯粹基于CSS的建议。无论如何，我也想知道如何在Angular中做到这一点。而且我确信可以在没有固定宽度的情况下实现这一点并且必须手动计算

以下是我在app模板中使用<slide-in>组件的方法：

<nav class="nav flex-column">
  <slide-in class="mb-3">
    <span class="slide-in-icon"><i class="fa fa-gear"></i></span>
    <span class="slide-in-text">Settings</span>
  </slide-in>
  <slide-in>
    <span class="slide-in-icon"><i class="fa fa-users"></i></span>
    <span class="slide-in-text">Users</span>
  </slide-in>
</nav>

这是组件本身：

import { Component, Input } from "@angular/core";
import { trigger, state, style, animate, transition, keyframes } from "@angular/animations"

@Component({
    selector: "slide-in",
    template: `
        <div id="root"
             class="bg-dark"
             (mouseenter)="mouseEnter()"
             (mouseleave)="mouseLeave()"
             [@slideInOut]="slideInOut">
            <a href="#"
               class="nav-link">
                <ul>
                    <li class="icon">
                        <ng-content select=".slide-in-icon"></ng-content>
                    </li>
                    <li>
                        <ng-content select=".slide-in-text"></ng-content>
                    </li>
                </ul>
            </a>
        </div>
    `,
    styles: [`
        div#root {
            float: right;
            font-size: 14pt;
        }
        ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
        }
        ul li {
            display: inline-block;
        }
        li.icon {
            font-size: 20pt;
            width: 28px;
        }
        a {
            color: white;
            padding: 15px;
        }
    `],
    animations: [
        trigger("slideInOut", [
            state("out", style({
                transform: "translateX(0)"
            })),
            state("in", style({
                transform: "translateX(55%)"
            })),
            transition("in => out", animate("750ms 100ms", keyframes([
                style({transform: "translateX(-15px)", offset: 0.4}),
                style({transform: "translateX(0)", offset: 1})
            ]))),
            transition("out => in", animate("0.2s ease-in"))
        ])
    ]
})
export class SlideInComponent {
    slideInOut: string = "in";

    mouseEnter() {
        this.slideInOut = "out";
    }

    mouseLeave() {
        this.slideInOut = "in";
    }
}