请稍等 ...
×

采纳答案成功!

向帮助你的同学说点啥吧!感谢那些助人为乐的人

transition不工作

@Component({

  selector: 'app-root',

  templateUrl: './app.component.html',

  styleUrls: ['./app.component.scss'],

  animations:[trigger('square',

    [

      state('green',style(

        {

          'background-color':'green',

          'height':'100px',

          transform:'translateY(-100%)'

        }

        )),

      state('red',style(

        {

          'background-color':'red',

          'height':'50px',

          transform:'translateY(100%)'

        }

)),

      transition('green => red', [animate('900ms ease-in')]),

      transition('red => green',[animate('800ms ease-out')]),

    ]

)]

})

export class AppComponent {

  @Input() squareState: string;

  darkTheme = false;

  switchTheme(dark) {

    this.darkTheme = dark;

    console.log("dark: %s", dark);

    this.oc.getContainerElement().classList.add(dark ? 'myapp-dark-theme' : null);

  }


  constructor(private oc: OverlayContainer){}

  onClick(){

    this.squareState = this.squareState === 'red' ? 'green' : 'red';

  }

}



实在是找不到原因了

正在回答 回答被采纳积分+3

6回答

提问者 木鸟 2018-07-12 15:44:34

我勒个xx,解决了,NoopAnimationsModule,和BrowserAnimationsModule冲突,我把它去掉就好了。。。。这个我记得好像是课件里老师特意加的吧?

0 回复 有任何疑惑可以回复我~
提问者 木鸟 2018-07-12 15:37:40

app.component.html


<!--<mat-sidenav-container [class.myapp-dark-theme]="darkTheme">
<mat-sidenav #sidenav mode="over"> <!--mode有over,push,side
                                     另外有align属性,有star,end值,设置侧边栏从左边或者右边弹出。我们可以同时
 <!--                                    设置左右两边侧边栏-->
<!-- <app-sidebar></app-sidebar>
</mat-sidenav>
 <div class="site">
<!--   <header>
     <app-header (toggole)="sidenav.open()" (toggoleDarkTheme)="switchTheme($event)" ></app-header>
   </header>

   <main>
 <!--    <button (click)="sidenav.open()">打开侧边栏</button> -->
   <!--  <router-outlet></router-outlet>  -->
<!--     <div class="square"  [@square]="squareState" (click)="onClick()"></div>
   </main>

   <footer>
     <app-footer></app-footer>
   </footer>
 </div>

</mat-sidenav-container>

-->
<div class="square"  [@square]="squareState" (click)="onClick()"></div>



实际上这个文档,我已经吧其他组件全部注释,光留着动画了。  因为网上有什么组件覆盖会遮蔽动画效果云云,我也是实在没办法,死马当活马医了。。。。

0 回复 有任何疑惑可以回复我~
提问者 木鸟 2018-07-12 15:35:35

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import {AppRoutingModule} from './app-routing.module';
import { AppComponent } from './app.component';
import {CoreModule} from './core/core.module';
import { MatSidenavModule} from '@angular/material';
import {NoopAnimationsModule} from '@angular/platform-browser/animations';
import {LoginModule} from './login/login.module';
import {ProjectModule} from './project/project.module';
import { DialogTextComponent } from './dialog-text/dialog-text.component';
import {TaskModule} from './task/task.module';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';

@NgModule({
 declarations: [
   AppComponent,
   DialogTextComponent
 ],
 imports: [
   BrowserModule,
   CoreModule,
   MatSidenavModule,
   NoopAnimationsModule,
   AppRoutingModule,
   LoginModule,
   ProjectModule,
   TaskModule,
   BrowserAnimationsModule
 ],
 providers: [],
 bootstrap: [AppComponent]
})
export class AppModule { }

0 回复 有任何疑惑可以回复我~
提问者 木鸟 2018-07-12 15:34:56

app.component.ts

import {Component, Input} from '@angular/core';
import {OverlayContainer} from '@angular/cdk/overlay';
import {trigger, state, transition, style, animate} from '@angular/animations';
@Component({
 selector: 'app-root',
 templateUrl: './app.component.html',
 styleUrls: ['./app.component.scss'],
 animations:[trigger('square',
   [
     state('green',style(
       {
         'background-color':'green',
         'height':'100px',
       }
       )),
     state('red',style(
       {
         'background-color':'red',
         'height':'50px'
       }
)),
     transition("green => red", [animate('1s')]),
     transition("red => green",[animate('1s')]),
   ]
)]
})
export class AppComponent {
 @Input() squareState: string;
 darkTheme = false;
 switchTheme(dark) {
   this.darkTheme = dark;
   console.log("dark: %s", dark);
   this.oc.getContainerElement().classList.add(dark ? 'myapp-dark-theme' : null);
 }

 constructor(private oc: OverlayContainer){}
 onClick(){
   this.squareState = this.squareState === 'green' ? 'red' : 'green';
 }
}

0 回复 有任何疑惑可以回复我~
接灰的电子产品 2018-07-12 12:47:10

导入 BrowserAnimationsModule 没有


0 回复 有任何疑惑可以回复我~
  • 提问者 木鸟 #1
    导入了
    回复 有任何疑惑可以回复我~ 2018-07-12 15:29:48
  • 提问者 木鸟 #2
    app.component.tsimport {Component, Input} from '@angular/core';
    import {OverlayContainer} from '@angular/cdk/overlay';
    import {trigger, state, transition, style, animate} from '@angular/animations';
    @Component({
      selector: 'app-root',
      templateUrl: './app.component.html',
      styleUrls: ['./app.component.scss'],
      animations:[trigger('square',
        [
          state('green',style(
            {
              'background-color':'green',
              'height':'100px',
            }
            )),
          state('red',style(
            {
              'background-color':'red',
              'height':'50px'
            }
    )),
          transition("green => red", [animate('1s')]),
          transition("red => green",[animate('1s')]),
        ]
    )]
    })
    export class AppComponent {
      @Input() squareState: string;
      darkTheme = false;
      switchTheme(dark) {
        this.darkTheme = dark;
        console.log("dark: %s", dark);
        this.oc.getContainerElement().classList.add(dark ? 'myapp-dark-theme' : null);
      }
    
      constructor(private oc: OverlayContainer){}
      onClick(){
        this.squareState = this.squareState === 'green' ? 'red' : 'green';
      }
    }
    回复 有任何疑惑可以回复我~ 2018-07-12 15:34:25
提问者 木鸟 2018-07-12 02:51:02

从红到绿,从绿到红完全没有任何的过度。  就是从两个state状态 小红框  到 大绿框。 问题在哪里

0 回复 有任何疑惑可以回复我~
问题已解决,确定采纳
还有疑问,暂不采纳
意见反馈 帮助中心 APP下载
官方微信