使用animejs更改css“显示”属性

Question

我正在尝试使用animejs 将div 元素的“显示”属性从none 更改为block，但没有任何反应。这是我的代码：

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

这个想法是在另一个元素悬停时显示一个元素（此功能分配给 onhover 事件）
元素定义为：

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

CSS：

.battery{
display:none;
}

Answer 1

从文档中，也为了澄清@user3491125 的答案； Animejs 只能为具有数值的属性设置动画。因此，要更改显示值，请在 begin 回调中编写常规 js 代码，该回调在动画开始时触发一次。

Answer 2

AnimeJS 的重点是简化 CSS 的 Vanilla JS 手势。 因此 CSS 为了创建一个淡入淡出动画，你需要编辑不透明度而不是显示。

所以你的css应该是

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

还有 JS

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