时间戳

首页 > 解决方案 > 使用animejs更改css“显示”属性

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

问题描述

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

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

这个想法是当另一个元素悬停时显示一个元素（这个函数被分配给一个悬停事件）
元素定义为：

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

CSS：

.battery{
display:none;
}

标签： cssdisplayanime.js

解决方案

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';
  },
});

推荐阅读