typescript Angular 2 -动画过渡不工作

egdjgwm8 于 2023-02-10 发布在 TypeScript

关注(0)|答案(8)|浏览(134)

我需要2种颜色OnClick之间的过渡。现在，这是我的代码：

- typescript **

animations: [
    trigger('menubarState', [
        state('false', style({backgroundColor:'#43a047'})),
        state('true', style({backgroundColor:'#333'})),
        transition('false => true', animate('1s')),
        transition('true => false', animate('1s'))
    ])
]

...

export class MenubarComponent {
  menuActive: boolean = false;
  onMenuClick () {
    if (this.menuActive == false) {
      this.menuActive = true;
    } else {
      this.menuActive = false;
    }
  }
}

- 超文本标记语言**

<li [@menubarState]="menuActive" (click)="onMenuClick()">
      <a><span class="material-icons icon">apps</span></a>
</li>

这确实改变了background-color，但是，这种改变是即时的，而不是过渡。
我用的是Chrome浏览器，最新版本.

typescript

来源：https://stackoverflow.com/questions/42156117/angular-2-animation-transition-not-working

8条答案

按热度按时间

ct2axkht1#

这个问题困扰了我很长时间，解决它的方法是将状态变量从布尔类型改为字符串类型。因此，不要跟踪true和false，而是跟踪'true'和'false'。
动画状态是在应用程序代码中定义的字符串值。
将MenubarComponent类更改为：

export class MenubarComponent {
  menuActive: string = 'false';
  onMenuClick () {
    if (this.menuActive === 'false') {
      this.menuActive = 'true';
    } else {
      this.menuActive = 'false';
    }
  }
}

我认为这很愚蠢。布尔值显然是二元状态的好选择。
更多信息：www.example.comhttps://angular.io/guide/animations#states-and-transitions

赞(0）回复(0）举报 2023-02-10

hts6caw32#

扩展AaronKrauss提供的答案。它在对真/假值的直接解释方面存在问题;然而，如果你不想引用字符串上下文，你可以用数字1（真）和0（假）替换上面的真和假，这证明可以解决我的问题，并且不需要任何烦人的字符串解释。

trigger('menubarState', [
    state('0', style({backgroundColor:'#43a047'})),
    state('1', style({backgroundColor:'#333'})),
    transition('0 => 1', animate('1s')),
    transition('1 => 0', animate('1s'))
])

赞(0）回复(0）举报 2023-02-10

1qczuiv03#

进一步扩展Aaron Krauss的回答：我不想把布尔值转换成字符串，所以我定义了一个getter：

public menuActive: boolean = false;

get menuState() {
  return this.menuActive ? 'active' : 'inactive'
}

然后在动画定义中（我合并了过渡，因为它们是相同的）：

animations: [
  trigger('menubarState', [
    state('inactive', style({backgroundColor:'#43a047'})),
    state('active', style({backgroundColor:'#333'})),
    transition('inactive <=> active', animate('1s'))
  ])
]

完整的模板：

<li [@menubarState]="menuState" (click)="onMenuClick()">
  <a><span class="material-icons icon">apps</span></a>
</li>

赞(0）回复(0）举报 2023-02-10

fgw7neuy4#

确保您在app.module.ts文件中导入BrowserAnimationsModule。

赞(0）回复(0）举报 2023-02-10

5vf7fwbs5#

我用动画，而路由/点击Angular 2。它的作品onclick也。使用此代码的所有类型的路由，您可以使用单独的动画单独的路线变化或onclick。

import { animate, AnimationEntryMetadata, state, style, transition, trigger } from '@angular/core';
export const slideInDownAnimation: AnimationEntryMetadata =
  trigger('routeAnimation', [
    state('*',
      style({
        opacity: 1,
        backgroundColor:'#43a047',
        transform: 'translateX(0)'
      })
    ),
    transition(':enter', [
      style({
        opacity: 0,
        backgroundColor:'#333',
        transform: 'translateX(-100%)'
      }),
      animate('0.2s ease-in')
    ]),
    transition(':leave', [
      animate('0.5s ease-out', style({
        opacity: 0,
        backgroundColor:'red',
        transform: 'translateY(100%)'
      }))
    ])
  ]);

您也可以根据自己的选择修改上面的代码。

赞(0）回复(0）举报 2023-02-10

gwo2fgha6#

我不知道我的回答是否解决了这个问题，但我会说，如果你使用离子/Angular ****触发/转换不工作，但只有触发/状态。
如果使用离子/Angular ，则应使用离子动画. https://ionicframework.com/docs/utilities/animations

赞(0）回复(0）举报 2023-02-10

4xy9mtcn7#

我不明白为什么这个设置返回给我一个白色页。如果我删除transition（），它会工作得很好

import { state, style, transition, trigger } from '@angular/animations';
import { Component } from '@angular/core';
// import { reduce } from 'rxjs-compat/operator/reduce';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  animations: [
    trigger('divState', [
      state('normal', style({
        backgroundColor: 'red',
        transform: 'translateX(0)'
      })),
      state('highlighted', style({
        backgroundColor: 'blue',
        transform: 'translateX(100px)'
      })),
      transition('normal => highlighted', animate(300)),
      transition('highlighted => normal', animate(800))
    ])
  ]
})
export class AppComponent {
  anim='normal';
  list = ['Milk', 'Sugar', 'Bread'];
  onAnimate(){
    this.anim == 'normal' ? this.anim='highlighted' : this.anim ='normal';
    
  }

    onAdd(item) {
      this.list.push(item);
    }
}
function animate(arg0: number): any {
  throw new Error('Function not implemented.');
}

赞(0）回复(0）举报 2023-02-10

camsedfj8#

你不会用CSS吗？
例如：

<!DOCTYPE html>
<html>
<head>

    <style>
    div {
       background-color: #FF0;
       height: 200px;
       width: 100px;
      animation: fontbulger 2s infinite;
    }

    @keyframes fontbulger {
     0% {
       background-color: blue;
     }
     50% {
       background-color: red;
     }
     100% {
       background-color: blue;
    }
    }
    </style>
    <title>test</title>
</head>
<body>
    <div></div>
</body>
</html>

赞(0）回复(0）举报 2023-02-10

我来回答

typescript Angular 2 -动画过渡不工作

8条答案

相关问题

热门标签

最新问答