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

回到顶部