A-FRAME 1.0.4 Как правильно определить анимацию mouseenter и mouseleave - PullRequest
Новая
       74

A-FRAME 1.0.4 Как правильно определить анимацию mouseenter и mouseleave

0 голосов
/ 03 августа 2020

У меня есть объект, содержащий изображение, использующееся в качестве кнопки. Я хочу масштабировать эту кнопку больше от «1 1 1» до «2 2 1» при наведении курсора мыши. Я использую JS для создания этой кнопки. Остальные атрибуты установлены и работают, но анимация не работает. Не могли бы вы показать мне, что не так? 


_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");

1 Ответ

0 голосов
/ 04 августа 2020

После создания этого объекта с помощью JS я вижу, что значение атрибута анимации пусто. Я не знаю, почему здесь не работает setAttribute.

Я пытаюсь использовать: createAttribute и setAttribtueNode, как показано ниже, и он работает: 

        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: Я могу используйте ниже setAttribute, чтобы установить анимацию для другого объекта: _im.setAttribute("animation__rotation", "property: rotation; loop: true; from: 0 0 0; to: 0 360 0; dur : 5000"); и в инспекторе chrome браузера он также показывает пустое, но работает изображение объекта в инспекторе

при использовании createAttribute и setAttributeNode, значение анимации полностью отображается в инспекторе , как на этом снимке

...