Измените свойство css display с помощью animejs

Я пытаюсь изменить свойство display элемента 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;
}

Свойство display нельзя анимировать.

— 11.03.2019 12:04

css display anime.js

11.03.2019 11:59

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

CSS: FlexBox

Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.

5 805

Перейти к ответу Данный вопрос помечен как решенный

Ответы 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';
  },
});

opacity: hidden; ? Это шутка? С каких пор это допустимое значение свойства CSS opacity?

— 22.10.2021 13:03

Вместо использования opacity: hidden используйте 0, поскольку opacity не имеет значения свойства hidden.

— 19.11.2021 12:13

11.03.2019 12:20

Из документации, а также для уточнения ответа @ user3491125; Animejs может анимировать только те свойства, которые имеют числовые значения. Итак, чтобы изменить отображаемое значение, напишите обычный код js в обратном вызове начинать, который запускается один раз при запуске анимации.

Это не дает ответа на вопрос. Как только у вас будет достаточно репутация, вы сможете комментировать любой пост; вместо этого давать ответы, не требующие пояснений от спрашивающего. - Из обзора

— 07.10.2021 19:49

Объяснение того, что решило вашу проблему, может помочь другим пользователям понять, что им нужно делать :) Вы также можете поделиться своим кодом.

— 07.10.2021 20:23

07.10.2021 16:30