Question

首先，我使用的是Typescript和this blog post by Mikhail Shilkov。

虽然我使用的是Typescript，但这篇文章是用Javascript编写的，我想知道这是不是它的工作原因......（见下面的错误）

我在页面顶部设置了一个div，其中包含变量＆＃34; test＆＃34;我已经链接到一个改变测试值的按钮。

<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(() => {

...说它无法读取属性＆＃39;包含＆＃39;未定义..

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文件添加到包含＆＃34;＆＃34;的页面顶部此视图模型的标签。

<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>

Answer 1

尝试将构造函数更改为：constructor(private element: Element, public animator: CssAnimator)

Aurelia - 麻烦让CssAnimator使用简单的消息div

1 个答案: