fix: 修复footer标签不能切换以及btn-click指令效果更改

Author: lzhfe

src/app/edit/edit.component.html

@@ -49,7 +49,7 @@
       </li>
     </ul>
     <div class="btn">
-      <button type="submit" class="fl">保存</button>
+      <button type="submit" class="fl" btnClickStyle>保存</button>
       <button (click)="cancleOperate()" class=" fr">取消</button>
     </div>
   </form>

src/app/shared/btn-click.directive.ts

@@ -1,20 +1,35 @@
 import {Directive, ElementRef, Input, Renderer} from "@angular/core";
 
+const ClickingBackColor = '#eee';
+
 @Directive({
   selector: "[btnClickStyle]",
   host: {
-    "(click)": "btnClick()"
+    "(click)": "doClick()"
   }
 })
 export class BtnClickDirective {
   private el: HTMLElement;
+  private timer: any;
+  private animating: boolean;
   constructor(el: ElementRef) {
     this.el = el.nativeElement;
+    this.el.style.transition = 'background-color .2s ease-out';
   }
-  btnClick() {
-    this._addClasssName("btn-click");
-  }
-  private _addClasssName(className: string) {
-    this.el.className = this.el.className + " " + className;
+  doClick() {
+    if(this.animating) return;
+    this.animating = true;
+    this.el.prevBackColor = this.el.style.backgroundColor;
+    this.el.style.backgroundColor = ClickingBackColor;
+    clearTimeout(this.timer);
+    this.timer = setTimeout(() => {
+      this.el.style.backgroundColor = this.el.prevBackColor || '';
+      this.animating = false;
+    }, 200);
   }
 }
+
+interface HTMLElement {
+  prevBackColor: string;
+  style: any;
+}

src/app/shared/footer.component.css

@@ -44,7 +44,7 @@ nav em {
   margin-top: -5px;
   opacity: 0;
 }
-nav a.btn-click em{
+/*nav a.btn-click em{
   -webkit-animation: scale_zoom 1s both infinite;
 }
 
@@ -60,4 +60,4 @@ nav a.btn-click em{
     100%{
       opacity: 0;
     }
-}
+}*/

src/app/shared/footer.component.html

@@ -1,8 +1,8 @@
 <nav>
-  <a [routerLink]=" ['/collection'] " [ngClass]="{clickOn: !footer}">
+  <a [routerLink]=" ['/collection'] " [ngClass]="{clickOn: !isListPage}">
     <i>收藏</i>
   </a>
-  <a [routerLink]=" ['/list']" [ngClass]="{clickOn: footer}" btnClickStyle>
+  <a [routerLink]=" ['/list']" [ngClass]="{clickOn: isListPage}">
     <em></em>
     <i>通讯录</i>
   </a>

src/app/shared/footer.component.ts

@@ -7,13 +7,13 @@ import {Location} from '@angular/common';
   styleUrls: ['app/shared/footer.component.css']
 })
 export class FooterComponent implements OnInit {
-  private footer:boolean = true;
+  private isListPage:boolean = true;
 
   constructor(
     private _location:Location
   ) {}
 
   ngOnInit() {
-    this._location.path() == '' || this._location.path().indexOf('/contact-list') > -1  ? this.footer = true : this.footer = false;
+    this.isListPage = this._location.path() == '' || this._location.path().indexOf('/list') > -1 
   }
 }