css - 使用 animejs 更改 css "display"属性

Question

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

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

想法是当另一个元素悬停时显示一个元素(此功能分配给悬停事件)
元素定义为:

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

CSS:

.battery{
display:none;
}

Answer 1

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

所以你的CSS应该是

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

和JS

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