• Страница 1 из 1
  • 1
Форум » Web-Раздел » Начинающему вебмастеру » Как использовать свойство перехода CSS3 (Подробный обзор свойств CSS3-переходов)
Как использовать свойство перехода CSS3
Kosten
Среда, 31 Января 2018 | Сообщение 1
Оффлайн
Администраторы
Сообщений:44267
Награды: 70
Не пугайтесь переходов CSS, они могут казаться сложными, если вы ничего не знаете о них, но на самом деле они довольно просты и легко реализуются. Переходная анимация возникает, когда значение любого свойства элемента запускается для изменения часто что-то подобное происходит, когда вы реализовали эффект зависания.

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

Код
div{
   height: 100px;
   -webkit-transition: height 3s;
}
div:hover{
   height: 200px;
}

Очень важно, чтобы вы не забыли включить длительность перехода, или время продолжительности будет по умолчанию равным 0, а эффект перехода не произойдет. Также не забудьте использовать s (секунды) для количественного определения продолжительности.
Давайте посмотрим пример этого в действии. Для целей этого примера предположим, что мы хотим добавить эффект перехода к изменению высоты элемента div при наведении. Вот код, который нам нужен для достижения этого эффекта:

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

При использовании свойства перехода не забудьте определить свойство CSS, к которому будет применяться переход, если свойство div: hover с изменением высоты для элемента не существовало, тогда не было бы никакого эффекта перехода. Если с вашим переходом будет изменено более одного свойства, вы можете использовать свойство перехода в сокращении перехода, чтобы убедиться, что все необходимые переходы происходят.
Страна: (RU)
Kosten
Среда, 31 Января 2018 | Сообщение 2
Оффлайн
Администраторы
Сообщений:44267
Награды: 70
На одном сайте нашел тему по переходу, но там только стили представлены были.

Кто знает как они работают.

Вот демонстрацию сделал, но думаю что то по другому должно.

DEMO
Страна: (RU)
-SAM-
Четверг, 01 Февраля 2018 | Сообщение 3
Оффлайн
Друзья сайта
Сообщений:880
Награды: 40
Цитата Kosten ()
Вот код, который нам нужен для достижения этого эффекта: [...]
Это верхний код, который вы опубликовали как пример перехода (задержки) на смену прозрачности (если такой там вообще был, по идеи идти должно было), вот и всё... всё написано в статье. Просто тот код пропишите ниже (именно, что идёт пример на изменение высоты блока, с задержкой).
Цитата Kosten ()
Вот демонстрацию сделал, но думаю что то по другому должно.
Всё работает, как и положено. Только, что не во всех браузерах (как и написано в статье, что нужно префиксы прописывать). Вот кроссбраузерно (естественно, что в более новых браузерах, которые поддерживают это свойство): https://jsfiddle.net/4hj4v9xy/1/
Прикрепления: 7459933.png (12.7 Kb)




Помог? Скажи спасибо в виде "+" - вам мелочь, а мне приятно.
Бесплатное оказание помощи в ответах на "Вопросы про uCoz".


Сообщение отредактировал
-SAM- - Четверг, 01 Февраля 2018, 06:48
Страна: (UA)
Kosten
Пятница, 02 Февраля 2018 | Сообщение 4
Оффлайн
Администраторы
Сообщений:44267
Награды: 70
А, где можно такую функцию применить?
Страна: (RU)
Форум » Web-Раздел » Начинающему вебмастеру » Как использовать свойство перехода CSS3 (Подробный обзор свойств CSS3-переходов)
  • Страница 1 из 1
  • 1
Поиск: