• 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏吧

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

typescript 来源:si2030 7次浏览

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


版权声明:本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系管理员进行删除。
喜欢 (0)