使用 animejs 更改 css "display" 属性

Question

我正在尝试使用 animejs 将 div 元素的 "display" 属性从 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';
  },
});

Answer 2

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

使用 animejs 更改 css "display" 属性

Change css "display" property using animejs

css

display

anime.js