css - 侧面菜单 Angular 4 中的动画背景颜色

Question

我想在侧边菜单中为事件元素的背景设置动画。我有以下 html:

    <ul>
      <li>Dashboard</li>
      <li>Content Hub</li>
      <li>Users</li>
      <li>Sources</li>
      <li>Stories</li>
      <li (click)="toggleActive()" [ngClass]="[active ? 'active' : '']">Workshop</li>
      <li>Tags</li>
      <li>Reports</li>
      <li>Custom Categories</li>
    </ul>

它现在只是一个测试菜单，例如，我想在点击 Workshop 时设置动画背景，点击它会获得类事件 = 白色背景从左到右滑入，当失去事件时 - 从右滑出到左边。

编辑:我考虑过添加一个过渡，但如何将其设置为从左到右/右-> 左移动？ CSS:

li {
        width: 65%;
        margin-bottom: 20px;
        padding: 15px 0 15px 40px;
        cursor: pointer;
        background-color: transparent;
        transition: 1s all ease-in-out;

        &.active {
          background-color: #fff;
          transition: 1s all ease-in-out;
        }
      }

Answer 1

是这样的吗？

HTML:

<ul>
  <li>Dashboard</li>
  <li>Content Hub</li>
  <li>Users</li>
  <li>Sources</li>
  <li>Stories</li>
  <li>Tags</li>
  <li class="active">Reports</li>
  <li>Custom Categories</li>
</ul>

CSS:

   ul li {
  background: #fff;
  padding: 10px;
  border: 1px solid #eee;
  position: relative;
  z-index: 3;
  font-family: arial;
  font-size: 14px;
}

ul li::before{
  content: "";
  position: absolute;
  width: 0;
  height: 100%;
  top: 0;
  left: 0;
  background: #5ca5f0;
  transition: .3s;
  z-index: -1;
  opacity: 0;
}

ul li.active::before{
  width: 100%;
  opacity: 1;
}

ul li.active{
  color: #fff;
}

http://jsfiddle.net/waq6Lq9f/2/