1

我正在尝试将 Angular 动画与变量一起使用，但我犯了一些我无法弄清楚的错误，

我想要完成的是在我的侧边栏的“li”元素上“移动”一个“标签”。这是我的 HTML：

<div class="sidebar-wrapper">
    <div class="nav-container">
      <ul class="nav">
          <li *ngFor="let menuItem of menuItems" routerLinkActive="active"
                class="{{menuItem.class}}" (click)="navMenuToggle($event, menuItem.icon, menuItem.title)">
              <a [routerLink]="[menuItem.path]">
                  <i class="material-icons">{{menuItem.icon}}</i>
                  <p>{{menuItem.title}}</p>
              </a>
          </li>
      </ul>
      <div [@moving-tab]="movTabVar" class="moving-tab" style="width: 230px;">
        <i class="material-icons">{{icon}}</i>
        <p>{{title}}</p>
      </div>
    </div>
</div>

我有 Angular 4.3.3，我尝试在动画中使用变量，这里是 sidebar.componet.ts：

import { Component, OnInit, ElementRef } from '@angular/core';
import { ROUTES } from './sidebar-routes.config';
import { animate,  transition} from '@angular/animations';

import {movingTabAnimation, movingTab} from './moving-tab-animation';

@Component({
  selector: 'sidebar-cmp',
  moduleId: module.id,
  templateUrl: './sidebar.component.html',

  animations: [movingTab]

})
export class SidebarComponent implements OnInit {

  public movTabVar = {

    value: 'inactive',
    params: {translate3d: 'translate3d(0, 20px, 0)'},

  }

  public menuItems;
  public icon: String;
  public title: String;

  constructor() {

  this.movTabVar.value = "inactive";
  this.movTabVar.params.translate3d = "translate3d(0, 380px, 0)";
  this.icon = 'home';
  this.title = 'Home';

  }

  ngOnInit() {

    this.menuItems = ROUTES.filter(menuItem => menuItem);


  }

  navMenuToggle(value, _icon: String, _title: String){

    this.movTabVar.value =(this.movTabVar.value === 'active' ? 'inactive' : 'active');
    this.icon = _icon;
    this.title = _title;
    let  tmp = value.srcElement.parentElement.getBoundingClientRect().top-80;
    this.movTabVar.params.translate3d="translate3d(0," +String(tmp)+"px,0)";

    //<!-- TODO: Clean the consol log -->
    console.log(this.movTabVar.value);
    console.log("the icon is "+this.icon+" the Title is "+this.title);
    console.log("position "+ (this.movTabVar.params.translate3d));


  }

}

这是我的动画：

import {
  animate,
  animateChild,
  animation,
  state,
  style,
  transition,
  trigger,
  useAnimation
} from '@angular/animations';

export const movingTabAnimation = animation([
  style({
    transform: '{{translate3d}}'
  }),
animate('0.9s cubic-bezier(0.29, 1.42, 0.79, 1)')
], { params: { translate3d: 'translate3d(0, 20px, 0)' } });

export const movingTab = trigger(
  'moving-tab',
  [
    transition(
      'inactive <=> active',
      [
        useAnimation(movingTabAnimation)
      ],
      { params: { translate3d: 'translate3d(0, 380px, 0)' } }
    )
  ]
);

我在控制台上没有收到任何错误，但选项卡固定在同一位置，

在此先感谢您的帮助。

4

0 回答 0