Изменить свойство css "display" с помощью animejs

Question

Я пытаюсь изменить свойство display элемента div с none на block, используя animejs, но ничего не происходит.Вот мой код:

function marker_hover() {    
    anime({
        targets: '.battery',        
        display: 'block',
        duration: 250,
        easing: 'easeInOutQuad'
    });
}

идея состоит в том, чтобы раскрыть элемент при наведении другого элемента (эта функция назначена событию onhover)
элемент определен как:

<div class="battery">TEST</div>

CSS:

.battery{
display:none;
}

Answer 1

Весь смысл AnimeJS - упрощение жеста Vanilla JS в CSS. Таким образом, CSS для создания анимации fadeIn вам нужно отредактировать непрозрачность, а не отображать.

так что ваш css должен быть

display:none;
opacity:hidden;
}

И JS

anime({
        targets: '.battery',        
        opacity: '1',
        duration: 250,
        easing: 'easeInOutQuad'
    },
    begin: function() {
     document.querySelector(".battery").style.display = "block";
    }
);