- CSS Transition работает при добавлении класса, но не при его удалении
- 2 ответа
- При добавлении класса анимация с keyframes работает, а при удалении нет, хотя transition задано
- 2 ответа 2
- Почему transition-group не работает?
- CSS переход не работает по клику
- 8 ответов
- Как запускать CSS-анимацию при прокрутке страницы
- Настройка CSS-анимации с помощью ключевых кадров
- Управление анимацией с помощью CSS-класса
- Добавление CSS-класса, когда элемент появляется при скролле (прокрутке страницы вверх-вниз)
- Запуск CSS-transition при скролле
CSS Transition работает при добавлении класса, но не при его удалении
Прежде всего, просто хотел упомянуть, что я прочитал эту ветку:
И решение там не работает для меня. У меня есть навигация, которая скрыта, когда браузер находится в пределах небольшой точки останова, и открывается при нажатии на элемент. Щелчок по элементу добавляет класс через jQuery. После открытия есть кнопка закрытия, которая при нажатии удаляет класс. Класс складывается и вычитается, как и ожидалось, но по какой-то причине переход работает только при добавлении класса .open, а не при его удалении. Вот мой код:
CSS (Compass + Sass):
Я здесь довольно тупой. Имейте в виду, что я использую Компас и что первоначальный переход работает как ожидалось.
2 ответа
Как упоминалось в комментариях, проблема в том, что height: 0 сразу же скрывает элемент при удалении класса. Непрозрачность все еще меняется, но вы ее не видите.
К сожалению, поскольку height: auto не является переходным значением, добавление высоты к переходу не поможет. Вы можете сделать это с фиксированной высотой, если вы установите задержку, когда открытый класс отсутствует, но удалите задержку, когда она добавлена.
В качестве альтернативы фиксированному height , если вы не полагаетесь на компоновку элемента при раскрытии, вы можете использовать visibility , который может переходить (ну, вы все равно можете отложить его переходом), тот же метод выше.
Однако это означает, что высота элемента всегда будет одинаковой. Если вам нужно, чтобы элемент имел переменную высоту, вы можете использовать JavaScript для вычисления высоты цели и установить его на фиксированную высоту на время анимации.
Попробуйте это, вы просто забыли «» в элементе вашего тела и поместили элементы внутрь () Вот так:
Источник
При добавлении класса анимация с keyframes работает, а при удалении нет, хотя transition задано
В этом примере все достаточно очевидно и отрабатывает правильно
Но мне необходимо усложнить анимацию, как это сделать правильно? При добавлении keyframes анимация отрабатывает только при добавлении класса, а при удалении все происходит без анимации.
Как мне необходимо организовать код, чтобы анимация по клику отрабатывала «в обе стороны»?
2 ответа 2
Анимации (animation), в отличие от переходов (transition), работают только в одну сторону. Переключение направления нормально не поддерживается.
Вообще-то существует свойство animation-direction , но оно не поможет, потому что, если имя анимации не меняется, то элемент продолжает «проигрывать» одну и ту же последовательность. Если изменить направление, то анимация будет всё ещё в завершённом состоянии, и просто изменится конечное значение, которое браузер и применит моментально. И удаление имени анимации animation-name не поможет, потому что в этом случае сбросится и конечное значение, что вас не устроит ( animation-fill-mode у вас both ). Что касается переходов, то они существуют отдельно от анимаций, анимировать одни и те же свойства двумя способами бессмысленно, а свойства переходов на анимации не влияют.
Если хотите анимировать в обе стороны, то нужно использовать или анимации с двумя отдельными @keyframes для каждого направления, или переходы, которые поддерживают изменение направления.
Источник
Почему transition-group не работает?
Ничего вы из массива не удаляете (если только про код не наврали).
Нужно или нет — я без понятия. Вы почему-то предпочли умолчать о том, что пытаетесь сделать.
как это не было удаления, если я «сразу же элемент добавил обратно»?
Vue не выполняет рендеринг сразу же после изменения данных.
С точки зрения js я удалил элемент
Нет. Фильтрация + присваивание удалением не является. Так что никаких домыслов, говорю как есть.
«не работает» — нормальный разговор, если есть конкретный пример
Нет, не нормальный. Ещё раз — задавая вопрос, следует рассказывать, какого поведения вы пытаетесь добиться. Да и «конкретного примера» не было — так, огрызки кода. «Конкретный пример» — это ссылка на песочницу.
Источник
CSS переход не работает по клику
Я просто хочу показать уведомление о клике внизу слева на моей странице. Окно уведомлений отображается правильно, но переход не работает. Я пробовал таким образом.
Вот скрипка Что не так с кодом?
8 ответов
Вот рабочий результат.
Я изменил несколько вещей:
- Я изменил notification-alert на класс, потому что это хорошая практика — использовать классы для переходов CSS, потому что классы представляют разные состояния, в которые ваш элемент будет переходить и переходить.
- Кроме того, я добавил новый класс notification-alert—shown , который представляет состояние этого элемента, когда он отображается.
- Я использовал jquery для добавления класса notification-alert—shown при нажатии кнопки, чтобы инициировать переход.
Теперь нам нужно объяснить, как работают CSS-переходы:
CSS-переходы работают путем добавления фреймов в различные классы CSS и из них (это хорошая практика). Чтобы осуществить переход, вам нужно как минимум два класса. В данном случае это notification-alert и notification-alert—shown . Эти классы отличаются (т. Е. Имеют конфликтующие свойства) только свойствами transform и opacity .
Так как эти свойства различаются в двух классах, я могу указать CSS для перехода (то есть добавления фреймов между ними) к двум классам при их изменении.
Поэтому, когда я добавляю класс notification-alert—shown , я говорю браузеру добавить кадры для перехода из состояния
И я говорю браузеру, что хочу перевести все другое свойство, добавив all в transition: all . .
Вы также подняли несколько вопросов в комментариях:
Это работает отлично. Но это только эффект затухания. Но почему этот вид анимации не работает? Функция перехода-тайминга: кубический Безье (0,175, 0,885, 0,32, 1,275);
И это заставляет меня думать, что у вас есть небольшое недопонимание относительно свойства transition-timing-function . transition-timing-function не связан с точным перемещением элемента — он касается только того, как запрашиваемый переход применяется во времени. Вы можете узнать больше о свойстве времени перехода здесь .
И вы также попросили еще одну вещь:
Отлично смотрится сейчас! Как я могу исчезнуть через несколько секунд?
Для этого вы можете использовать window.setTimeout для запуска некоторого кода для удаления класса через определенное время.
Я обновил пример, чтобы продемонстрировать.
Вы не можете передать свойство display, оно либо видимое, либо нет, никаких промежуточных шагов. Однако вы можете легко добиться необходимого визуального эффекта с помощью анимированной прозрачности:
Обратите внимание, что вам нужно запланировать запуск фазы анимации в следующем цикле рендеринга, для этого вы можете установить задержку с помощью setTimeout .
Наконец, зачем использовать оба display: none и opacity: 0 ? Что ж, мы не хотим, чтобы пользователь случайно нажал «невидимое» предупреждение, что произошло бы, если бы вы использовали только opacity . Поэтому нам также нужно действительно скрыть предупреждение с помощью display: none (или другим способом, например, отрицательной позицией).
Источник
Как запускать CSS-анимацию при прокрутке страницы
В этом пошаговом руководстве будет рассмотрено создание CSS-анимации с нуля и её включение при скролле (прокрутке вверх-вниз) страницы, когда HTML-элемент находится в поле зрения — видимой части окна, с помощью Intersection Observer API.
Настройка CSS-анимации с помощью ключевых кадров
Начнем с создания CSS-анимации, которая определяется ключевыми кадрами @keyframes .
Анимацию можно назвать как угодно, пусть будет wipe-enter . Здесь HTML-элемент будет увеличиваться в ширину, а затем в высоту.
После того, как определены ключевые кадры, можно использовать анимацию для элемента, установив свойству animation-name название ключевых кадров: wipe-enter . Кроме этого необходимо установить animation-duration — продолжительность анимации и animation-iteration-count — счетчик итераций, указывающий, сколько раз анимация должна воспроизводиться, например — бесконечно.
CSS-класс .square пусть будет заключён в медиа-запрос prefers-reduce-motion: no-preference . Это обеспечит запуск анимации только в том случае, если пользователь не ограничил её и не включил параметр «уменьшить движение» в своей операционной системе.
В этом примере будет анимирован HTML-элемент квадратной формы:
Для CSS-анимации можно использовать сокращённое написание свойства animation , например:
Управление анимацией с помощью CSS-класса
Допустим, не нужно, чтобы анимация воспроизводилась сразу. Воспроизведением анимации можно управлять, добавляя HTML-элементу CSS-класс переключатель только анимации, который не используется для остальной стилизации элемента.
CSS-анимация будет воспроизводиться, когда HTML-элементу будет добавлен CSS-класс .square-animation :
В этом примере CSS-анимация воспроизводится не каждый раз при нажатии на кнопку, а только тогда, когда HTML-элементу будет добавлен CSS-класс .square-animation .
Несмотря на то, что анимация должна показывать появление элемента, элемент отображается и до добавления класса .square-animation . Это сделано для того, чтобы при первой загрузке элемент был виден пользователю, даже если JavaScript заблокирован или не работает.
Добавление CSS-класса, когда элемент появляется при скролле (прокрутке страницы вверх-вниз)
В примере выше была реализована CSS-анимация, которая запускается при добавлении HTML-элементу CSS-класса. Вместо перехвата события нажатия кнопки, для добавления и удаления CSS-класса можно использовать несколько вариантов обнаружения состояния, когда элемент при скролле появляется в видимой части окна.
Вот три способа определить, когда элемент находится в видимой области окна:
- Использовать Intersection Observer API
- Измерять смещение элемента при скролле страницы
- Использовать стороннюю JavaScript-библиотеку, которая реализует №1 или №2
Для базовой анимации с запуском при скролле, оптимально использование Intersection Observer API, потому что он требует меньше кода, удобнее и лучше с точки зрения производительности.
API-интерфейс Intersection Observer позволяет отслеживать момент пересечения одного элемента с другим, и сообщает, когда это происходит. Этот способ идеально подходит для запуска CSS-анимации при скролле страницы. Всё, что нужно знать — когда HTML-элемент пересекается с окном просмотра. Если он пересекается, значит — находится в видимой области окна и в этот момент надо запустить CSS-анимацию.
Intersection Observer API можно рассматривать, как обычный слушатель событий, но с некоторыми дополнительными опциями. Вместо того, чтобы прикреплять прослушивание событий к HTML-элементу, надо заставить наблюдателя отслеживать элемент и его положение на странице.
Начнём с создания наблюдателя и заставим его отслеживать HTML-элемент:
По умолчанию корневым элементом, который будет проверяться на пересечение, является окно браузера, поэтому наблюдателю нужно только сообщить об анимируемом HTML-элементе.
Когда функция обратного вызова (callback) запускается, она возвращает массив записей из целевых (target) элементов, которые были запрошены, а также некоторую дополнительную информацию о них. В функцию всегда будет возвращаться массив, даже если наблюдение ведётся только за одним элементом, как здесь.
В функции обратного вызова можно перебрать массив записей, чтобы указать, что с ними нужно сделать. Каждая запись имеет свойство isIntersecting , которое может быть true или false . Если оно возвращает true , это означает, что элемент находится в видимой области окна (viewport).
Собираем всё вместе. Обратите внимание, что entry — это объект, предоставленный наблюдателем, а entry.target — это фактический элемент, за которым который ведется наблюдение, поэтому именно ему нужно добавить CSS-класс для запуска анимации.
Теперь, когда HTML-элемент пересекает границы окна браузера, ему будет добавлен CSS-класс, который будет воспроизводить анимацию.
Если нужно, чтобы анимация запускалась каждый раз, когда HTML-элемент входит в видимую область окна, необходимо удалять CSS-класс запуска анимации, когда он находится за пределами видимой области окна.
Если элемент при анимации изменяет размер или положение, браузеру может быть сложно решить, находится ли элемент в данный момент в области просмотра или нет. Лучше всего поместить анимируемый элемент в контейнер, который не изменяет размер или положение и использовать его для наблюдения за скролллом.
Теперь надо наблюдать за HTML-элементом c CSS-классом square-wrapper а класс для анимации применять к элементу с классом square , как и прежде. Когда элемент-оболочка находится за пределами видимой области, нужно удалять CSS-класс у элемента .square , чтобы анимация перезапускалась каждый раз, когда элемент появляется в окне при скролле.
Чтобы элемент-оболочку было видно, для примера, ему добавлена пунктирная рамка. Попробуйте прокрутить вверх и вниз документ в окне ниже:
Теперь — порядок! Добавляя и удаляя CSS-класс каждый раз, когда при скролле страницы HTML-элемент входит в область просмотра, запускается CSS-анимация.
Запуск CSS-transition при скролле
Если для анимации используется только один шаг и не требуется применение @keyframes , например, достаточно изменения прозрачности HTML-элемента от 0 до 1, можно использовать CSS-transition вместо CSS-animation.
Метод по сути тот же. Вместо определения ключевых кадров ( @keyframes ) для CSS-класса анимации указаны свойства для transition .
Заставим HTML-элемент появляться, когда он перемещается в видимую область просмотра. Для этого в момент появления в окне при скролле ему надо добавить CSS-класс square-transition . Так пользователь, у которого заблокирован или не загружается JavaScript, должен всё-равно увидеть HTML-элемент в его окончательном состоянии.
Это особенно важно, поскольку анимация начинается с opacity: 0 . Если бы не было настройки CSS-класса square-transition и JavaScript не работал, пользователь вообще не увидел бы HTML-элемент! Но если эффект перехода заключается в том, чтобы что-то исчезло, наверное, это не понадобится делать.
При первом запуске JavaScript нужно удалить CSS-класс, чтобы затем, его можно было добавить обратно, когда действительно нужно запустить transition . Это должно быть сделано вне метода обработки наблюдения за скроллом, желательно в начале JavaScript. Вот полный код:
В этом примере CSS-transition запускается, когда элемент-оболочка при скролле появляется в окне. Если Javascript не запустился, элемент всё-равно будет виден.
Как видите, эту технику можно расширять разными способами, чтобы создать множество эффектов анимации.
Источник
