Change css "display" property using animejs

Issue

I'm trying to change a div element's "display" property from none to block using animejs, but nothing happens. Here is my code:

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

the idea is to reveal an element when another element is hovered(this function is assigned to an onhover event)
element is defined as:

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

CSS:

.battery{
display:none;
}

Solution

The whole point of AnimeJS is simplifying Vanilla JS gesture of CSS. Thus CSS in order to create a fadeIn animation you would need to edit opacity and not display.

so your css should be

.battery {
  display: none;
  opacity: hidden;
}

And JS

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

Answered By - user3491125