Aurelia - 獲取CssAnimator與簡單消息div工作時遇到的問題

首先，我使用的是Typescript和this blog post by Mikhail Shilkov。Aurelia - 獲取CssAnimator與簡單消息div工作時遇到的問題

雖然我用的打字稿這個職位是在Javascript中，我不知道這是否是它不工作的原因......（見下面的錯誤）

我已經設置了一個div在我的頁面的頂部是有變量「測試」，我已經鏈接到一個按鈕來改變測試的值。

<template> 
    <require from="./animateOnChange"></require> 

    <div animateonchange.bind="test"> 
     ${test} 
    </div> 

    <button click.delegate="testAnimation()" type="button">test Animation</button> 
</template>

在視圖：

public test: string = "pears"; 

testAnimation() { 
    this.test = "apples"; 
}

按後我使用自定義屬性。

我的AnimateOnChangeCustomAttribute類在下面，它在這裏，我得到一個錯誤。

import { autoinject, customAttribute } from 'aurelia-framework'; 
import { CssAnimator } from 'aurelia-animator-css'; 

@customAttribute('animateonchange') 
@autoinject 
export class AnimateOnChangeCustomAttribute { 

    element: any; 

    constructor(element, public animator: CssAnimator) { 
     this.element = element; 
    } 

    valueChanged(newValue) { 
     console.log("ELEMENT, NEW VALUE: ", this.element, newValue); 
     this.animator.addClass(this.element, 'background-animation').then(() => { 
      this.animator.removeClass(this.element, 'background-animation'); 
     }); 
    } 
}

它在這條線的錯誤：

this.animator.addClass(this.element, 'background-animation').then(() => {

...說，它無法讀取屬性 '包含' 的未定義..

Uncaught (in promise) TypeError: Cannot read property 'contains' of undefined 
at aurelia-animator-css.js:373 
at new Promise (<anonymous>) 
at CssAnimator.addClass (aurelia-animator-css.js:366) 
at AnimateOnChangeCustomAttribute.services/messages/animateOnChange.AnimateOnChangeCustomAttribute.valueChanged (animateOnChange.ts:16) 
at BehaviorPropertyObserver.selfSubscriber (aurelia-templating.js:3662) 
at BehaviorPropertyObserver.call (aurelia-templating.js:3527) 
at Controller.bind (aurelia-templating.js:3388) 
at View.bind (aurelia-templating.js:1406) 
at Controller.bind (aurelia-templating.js:3409) 
at View.bind (aurelia-templating.js:1406)

想知道，如果有人有一個想法爲什麼它在這裏失敗？

額外信息 我使用了與博客相同的CSS。

.background-animation-add { 
    -webkit-animation: changeBack 0.5s; 
    animation: changeBack 0.5s; 
} 

.background-animation-remove { 
    -webkit-animation: fadeIn 0.5s; 
    animation: fadeIn 0.5s; 
} 
@-webkit-keyframes changeBack { 
0% { background-color: white; } 
50% { background-color: lightgreen; } 
100% { background-color: white; } 
} 
@keyframes changeBack { 
0% { background-color: white; } 
50% { background-color: lightgreen; } 
100% { background-color: white; }

}

我加入這個CSS文件具有「」這個視圖模型標籤頁面的頂部。

<template> 
    <require from="../navmenu/navmenu"></require> 
    <require from="../../services/messages/messages"></require> 
    <require from="./app.css"></require> 
    <!--We want the nav bar to span the page--> 
    <div class="container-fluid"> 
     <navmenu router.bind="router"></navmenu> 
    </div> 
    <div class="container"> 
     <div className='col-sm-12'> 
      <div className='row'> 
       <messages></messages> //HERE IS THE VIEW MODEL. 
      </div> 
     <!--We want the media to centre so we use just container--> 

      <div className='row'> 
       <router-view></router-view> 
      </div> 
     </div> 
    </div> 
</template>

來源

2017-12-03 si2030

嘗試改變構造函數：'構造（私有元素：元素，公共動畫師：CssAnimator）' –

我改變了構造函數，但仍是同樣的錯誤。 – si2030

我試過，最初它沒有工作。現在它沒有錯誤。我相信傑夫斯的答案工作，但我需要刪除所有的內部細節，在具有通過綁定附加「animateOnChange」的div。就我而言，它現在起作用了，非常感謝傑夫的調整。 – si2030

嘗試改變構造函數：constructor(private element: Element, public animator: CssAnimator)

來源

2017-12-04 17:29:44

Aurelia - 獲取CssAnimator與簡單消息div工作時遇到的問題

回答

相關問題