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>
回答:
尝试改变构造函数:constructor(private element: Element, public animator: CssAnimator)
以上是 Aurelia - 获取CssAnimator与简单消息div工作时遇到的问题 的全部内容, 来源链接: utcz.com/qa/260155.html