Aurelia - 获取CssAnimator与简单消息div工作时遇到的问题

Z时代
2024-01-10
分类：问答

首先，我使用的是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>