В CSS свойство перехода используется для указания добавления эффекта перехода к одному или нескольким свойствам CSS.
Наиболее распространенное использование — добавление перехода к элементу, чтобы при изменении одного из его свойств из состояния A в состояние B оно больше не было очень прямым и навязчивым, а использовало анимацию движения.
Например:
<div></div>
div {
width: 140px;
height: 64px;
transition: .8s transform linear;
}
div:hover {
transform: translate(120px, 0);
}
Конечно, в дополнение к описанному выше основному использованию, на самом деле есть некоторые очень интересные детали и интересные способы использования перехода CSS. Позвольте мне объяснить их один за другим.
Не все свойства поддерживают переходы
Не все свойства поддерживают переходы. Как и в случае с анимацией, здесь приведен список всех свойств, поддерживающих переходы:CSS animated properties
Конечно, иногда исключений больше. Некоторые свойства, поддерживающие переходы, не поддерживают переходы в определенных состояниях. очень типичныйheight: autoиwidth: auto.
существуетCSS-трюки: динамическая анимация перехода высотыВ статье упоминается такой сценарий:
Динамическая анимация перехода высоты элемента недействительна. Псевдокод, вероятно, выглядит так:
{
height: unset;
transition: height 0.3s linear;
&.up {
height: 0;
}
&.down {
height: unset;
}
}
четко датьheightсвойство установленоtransition, но анимация перехода не запускается, а разворачивается сразу за один шаг:
причина в том,Переходы CSS не поддерживают изменения высоты или ширины элемента с автоматическим.
Для этого сценария мы можем использоватьmax-heightСделайте взлом.
Вот очень интересный маленький трюк. Так как не поддерживаетheight: auto, то мы находим другой способ использоватьmax-heightФункции для достижения динамического увеличения высоты, такие как:
{
max-height: 0;
transition: max-height 0.3s linear;
&.up {
max-height: 0;
}
&.down {
max-height: 1000px;
}
}
Для более подробной информации вы можете увидеть --CSS-трюки: динамическая анимация перехода высоты.
переход может точно контролировать каждое свойство
Продолжать. В переходе мы можем использоватьtransition: all 1s linearТаким образом, равномерно добавьте эффекты перехода (функции времени и плавности) ко всем поддерживающим переход свойствам под элементом.
В то же время мы также можем точно контролировать каждый атрибут отдельно:
{
// 可以这样
transition: all 1s linear;
// 也可以这样
transition: height 1s linear, transform 0.5s ease-in, color 2s ease-in-out;
}
И, как и в случае с анимацией, каждый переход поддерживает отложенное срабатывание:
div {
// 延迟 1s 触发过渡，过渡动画的时间为 0.8 秒
transition: .8s transform 1s linear;
}
div:hover {
transform: translate(120px, 0);
}
Видно, что независимо от того, является ли это триггером перехода или сбросом перехода, он будет ждать 1 секунду перед запуском.
Используя эту технику, мы можем добиться некоторой комбинации эффектов перехода. Сначала реализуем такую переходную анимацию изменения ширины и высоты:
<div></div>
div {
position: relative;
width: 200px;
height: 64px;
box-shadow: inset 0 0 0 3px #ddd;
}
div::before {
content: "";
position: absolute;
width: 0;
height: 0;
top: 0; left: 0; width: 0; height: 0;
box-sizing: border-box;
transition: width .25s, height .25s, border-bottom-color;
transition-delay: .25s, 0s, .25s;
}
div:hover::before {
width: 200px;
height: 64px;
border-left: 3px solid #00e2ff;
border-bottom: 3px solid #00e2ff;
}
Мы контролируем изменения высоты, ширины и нижней границы псевдоэлемента элемента соответственно и устанавливаем задержку 0,25 секунды для анимации перехода ширины и анимации цвета нижней границы, чтобы высота Элемент будет переходить первым из-за общей анимации перехода. Мировое время также составляет 0,25 с, поэтому после окончания анимации перехода по высоте начинается анимация перехода по ширине и изменяется цвет нижней границы.
Таким образом, их анимации перехода можно связать вместе и отразить на границе элемента, чтобы увидеть эффект:
По тому же принципу мы также используем другой псевдоэлемент элемента, но время их анимации нужно добавить к целому 0,5 секунды, и он не будет выполняться, пока не будет выполнена приведенная выше анимация перехода:
div::after {
right: 0;
bottom: 0;
}
div:hover::after{
transition: height .25s, width .25s, border-top-color .25s;
transition-delay: 0.5s, 0.75s, 0.75s;
width: 200px;
height: 64px;
border-top: 3px solid #00e2ff;
border-right: 3px solid #00e2ff;
}
Таким образом, мы можем объединить анимации перехода двух псевдоэлементов, чтобы получить полную анимацию границы следующим образом:
Вы можете нажать здесь для полной демонстрации:CodePen Demo -- Эффект анимации границы кнопки с задержкой перехода
Поэтому, разумно контролируя каждый атрибут, можно получить различные интересные эффекты, комбинируя их..
динамическое изменениеtransition-duration
Также есть очень интересный трюк, мы можем использовать некоторые псевдоклассы элемента для динамического измененияtransition-duration.
Например:
div {
width: 140px;
height: 64px;
border: 2px solid red;
transition: 3s all linear;
}
div:hover {
transition-duration: .5s;
border: 2px solid blue;
}
Продолжительность анимации перехода элемента при наведении курсора мыши на элементtransition-durationИзмените с 3 с на 0,5 с, чтобы при наведении элемента продолжительность анимации перехода составляла 0,5 с, а продолжительность сброса перехода — 3 с:
Используя этот маленький трюк, мы пытаемся создать несколько интересных эффектов.
Блокнот для подписи реализован на чистом CSS
Используя вышеупомянутые приемы, мы можем реализовать доску для подписи на чистом CSS.
В первую очередь в контейнере высотой и шириной 500px реализована разметка HTML сетки 100x100, с использованием flex и grid.Для удобства я использую шаблонизатор Pug.
div.g-box
-for(var i=0; i<100; i++)
div.g-row
-for(var j=0; j<100; j++)
div.g-item
Для удобства иллюстрации я добавилborder, на самом деле и фон, и сетка белые:
Для того, чтобы добиться эффекта подписи, мы придаем каждой сеткеg-itemДобавьте событие наведения, чтобы изменить цвет фона текущей сетки при наведении. При этом, самое главное, ** поставил очень большойtransition-duration, а при наведении установите очень маленькийtransition-duration, псевдокод выглядит следующим образом:
.g-item {
transition: 999999s;
}
.g-item:hover {
background: #000;
transition: 0s;
}
Взгляните на эффект:
Это достигается, когда наведение мыши идет вверх, потому чтоtransition: 0sПо этой причине цвет фона быстро меняется, и когда эффект наведения уходит,transition: 999999sПовторите проверку, и черный будет терпеть неудачу очень, очень медленно, настолько медленно, что вы не почувствуете, как он меняется.
Конечно, если мы хотим реализовать подпись, кое-чего еще не хватает, нужно понимать, что цвет фона элемента не будет меняться сразу при наведении курсора мыши на чертежную доску, а только при нажатии мыши (удерживать:activeсостояние), прежде чем начать следовать за дорожкой мыши, чтобы изменить цвет. Когда мышь перестает щелкать, она перестает рисовать.
Есть хитрый способ добиться этого: мы накладываем слой div на холст.z-indexЭто выше, чем холст.Когда мышь наводится на холст, она на самом деле нависает над слоем маски.При нажатии мыши он срабатывает.:activeмероприятие, добавьте:activceсобытие, просто удалите слой маски.
Псевдокод выглядит следующим образом:
div.g-wrap
div.g-box
-for(var i=0; i<100; i++)
div.g-row
-for(var j=0; j<100; j++)
div.g-item
.g-wrap {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: 10;
&:active {
display: none;
}
}
Таким образом реализуется полноценная доска для подписи, или чертежная доска:
Полная реализация кода и добавление с помощью CSSresetфункцию, вы можете нажать здесь:CodePen Demo -- Pure CSS signature
Используя эту технику, вы действительно можете использовать CSS для отслеживания движения мыши (хотя это очень безвкусно>_
вот так, от другаalphardexЭффект от использования вышеперечисленных методов, наложенных режимов наложения и фильтров для достижения:
Наконец
Это конец этой статьи, надеюсь, она вам поможет :), если вы хотите получить самую интересную информацию о CSS, не пропустите мой официальный аккаунт --Интересные факты о внешнем интерфейсе iCSS😄
Другие замечательные технические статьи по CSS собраны в моемGithub -- iCSS, продолжайте обновлять, добро пожаловать, нажмите звездочку, чтобы подписаться на коллекцию.
Если у вас есть какие-либо вопросы или предложения, вы можете общаться больше.Оригинальные статьи ограничены в написании и знаниях.Если в статье есть какие-либо неточности, пожалуйста, дайте мне знать.