6回答

木鸟

提问者

2018-07-12

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

0

0

木鸟

提问者

2018-07-12

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

0

木鸟

提问者

2018-07-12

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

0

木鸟

提问者

2018-07-12

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

0

接灰的电子产品

2018-07-12

导入 BrowserAnimationsModule 没有

0

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

共2条回复

木鸟

提问者

2018-07-12

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

0

0