Singer - Page

Posted on   |   In

Singer 是一个联系页

介绍：

根据https://www.behance.net/gallery/31860117/Honoured-singer 这里的设计实现的首页

angular2 基本功能涉及

  • animation
  • Rxjs
  • basic router
  • inputs/outpus
  • host
  • DI
  • @ViewChild
  • ng-content tag
  • @Query

Source Code:
https://github.com/dreambo8563/Honoured-singer/tree/master/src

sample:

ngAfterViewInit() {
    this._animationBuilder
        .css()
        .setFromStyles({ 'font-size': '0px' })
        .setToStyles({ 'font-size': '70px' })
        .setDuration(3000)
        .start(this.firstNameEl.nativeElement)
        .onComplete(() => {
            this.showOthers.emit(true);
        });
}
import {Injectable} from 'angular2/core';
import {Observable} from 'rxjs/Observable';
import {Observer} from 'rxjs/Observer';

@Injectable()
export class ShowBasicInfo {
    showBasic$: Observable<boolean>;
    private _showBasic: Observer<boolean>;
    constructor() {
        this.showBasic$ = new Observable(
            observer => {return this._showBasic = observer; }).share();
    }

    show(show: boolean) {
        this._showBasic.next(show);
    }
}

效果图。。看不到动画

image