A-FRAME 1.0.4 如何正确定义 animation mouseenter 和 mouseleave

Question

I have an entity contain an image using as a button I want to scale that button larger from "1 1 1" to "2 2 1" when mouse hover. I use JS to generate that button. Other attributes are set and working, but the animation doesn't work. Could you please show me what is wrong?

_buttonA.setAttribute("animation__mouseEnter", "property: scale; type: scale; from: 1 1 1; to: 2 2 1; startEvents: mouseenter; dur: 500");

 _buttonA.setAttribute("animation__mouseLeave", "property: scale; type: scale; from: 2 2 1; to: 1 1 1; startEvents: mouseleave; dur: 500");

Answer 1

After generating that object via JS, I see the value of the animation attribute is empty. I don't know why the setAttribute isn't working properly here.

I try to use: createAttribute and setAttribtueNode as below and it works:

        var animation__mouseEnter = document.createAttribute("animation__mouseEnter");
        var animation__mouseLeave = document.createAttribute("animation__mouseLeave");
        animation__mouseEnter.value ="property: scale; type: scale; from: 1 1 1; to: 1.3 1.3 1; startEvents: mouseenter; dur: 200";
        animation__mouseLeave.value ="property: scale; type: scale; from: 1.3 1.3 1; to: 1 1 1; startEvents: mouseleave; dur: 200";
        buttonA.setAttributeNode(animation__mouseEnter);
        buttonA.setAttributeNode(animation__mouseLeave);

P/S: I can use below setAttribute to set animation for other object: _im.setAttribute("animation__rotation", "property: rotation; loop: true; from: 0 0 0; to: 0 360 0; dur: 5000"); and in inspector of chrome browser, it also shows empty, but it works image of the object in inspector

if using createAttribute and setAttributeNode, the value of animation is displaying fully in the inspector like this snapshot