CSS непрозрачность анимации меняет положение?

Question

CSS непрозрачность анимации меняет положение?

1

Свойство CSS-анимации при использовании для изменения непрозрачности также изменяет положение элемента? Если да, то что происходит в DOM, что делает это, и как это можно компенсировать?

Контекст: я добавил Javascript EventListener к набору изображений, который при нажатии вызывает функцию, которая инициирует анимацию CSS, затухающую щелкнув изображение. Также установлен таймер, который удаляет класс CSS, тем самым возвращая кликнутое изображение с непрозрачности 0 на непрозрачность 1. Все работает отлично, за исключением того, что изображение слегка появляется слева и сверху, откуда я изначально разместил его, и где я хочу, чтобы он быть. Такой же нежелательный эффект происходит как в Chrome, так и в Safari.

Здесь CSS:

.hiddenanimal { 
    animation: animalfade 1s;
    animation-fill-mode: forwards;
}

@keyframes animalfade {
    from { opacity: 1; 
    } to {  opacity: 0; 
    }
}

Dan-in-Austin 29 дек. 2017, в 00:34

Источник

6

Пожалуйста, предоставьте минимальный воспроизводимый пример, чтобы иметь возможность правильно ответить на ваш вопрос (вместо того, чтобы просто гадать)
ochi 28 дек. 2017, в 23:05
0

Мой Javascript добавляет класс скрытого животного CSS ниже, а затем удаляет его: `.hiddenanimal {animation: animalfade 1s; анимация-режим заполнения: вперед; } @keyframes animalfade {from {opacity: 1; } до {непрозрачность: 0; }}
Dan-in-Austin 28 дек. 2017, в 23:31
3

Вы можете изменить вопрос , чтобы добавить минимальный воспроизводимый пример - Добро пожаловать в StackOverflow - пожалуйста , возьмите тур и проверить наш раздел Как Спросите
ochi 28 дек. 2017, в 23:37
0

Ответить на ваш вопрос - нет. Предоставленный CSS не изменяет положение изображения. Я предполагаю, что что-то происходит в вашем JavaScript: о)
agrm 28 дек. 2017, в 23:58

Показать ещё 2 комментария

Теги:

javascript

css

dom

css-animations

1 ответ

Ещё вопросы

Пожалуйста, предоставьте минимальный воспроизводимый пример, чтобы иметь возможность правильно ответить на ваш вопрос (вместо того, чтобы просто гадать)
Мой Javascript добавляет класс скрытого животного CSS ниже, а затем удаляет его: `.hiddenanimal {animation: animalfade 1s; анимация-режим заполнения: вперед; } @keyframes animalfade {from {opacity: 1; } до {непрозрачность: 0; }}
Вы можете изменить вопрос , чтобы добавить минимальный воспроизводимый пример - Добро пожаловать в StackOverflow - пожалуйста , возьмите тур и проверить наш раздел Как Спросите
Ответить на ваш вопрос - нет. Предоставленный CSS не изменяет положение изображения. Я предполагаю, что что-то происходит в вашем JavaScript: о)

Intervalia · Accepted Answer · 2017-12-28T22-26-00.000Z

Простой ответ: анимация CSS будет изменять только значения, о которых вы говорите. В вашем примере:

@keyframes animalfade {
  from {opacity: 1;} to {opacity: 0;}
}

Единственное, что изменится, это opacity.

Если ваш элемент перемещается, происходит что-то еще и, возможно, не элемент с анимацией.

Вы спрашиваете, что происходит в DOM. Технически: ничего. Значения CSS меняются со временем, а не DOM.

Наличие лучшего примера поможет другим лучше ответить на ваш вопрос. Я сделал предположения и не знаю, мой ответ даже близко к тому, что вы хотите знать. Если вы можете обновить свой вопрос, включив некоторые HTML и JavaScript, я могу изменить свой ответ.

Спасибо, ваш ответ помогает, потому что он заставил меня искать объяснения в другом месте. Проблема, кажется, связана с Javascript. Я использовал метод setAttribute для добавления класса .hiddenanimal, не понимая, что он удалит мой существующий класс, у которого есть отступы. Когда я использую setAttribute для добавления моего исходного класса при вызове таймера, тогда изображение возвращается в положение, которое я хочу. Мне также нужно было добавить такое же количество @keyframes animalfade в @keyframes animalfade потому что в противном случае он @keyframes animalfade бы в начале анимации.