Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 28.03.2018, 10:18
Новичок на форуме
Отправить личное сообщение для ja0je Посмотреть профиль Найти все сообщения от ja0je
 
Регистрация: 28.03.2018
Сообщений: 2

Как сделать чтобы попап не просто открывался а выезжал?
Есть кнопка по нажатию на которую открывается попап, но нужно чтобы этот попап не просто открывался, а плавно выезжал из под этой кнопки и заезжал обратно при повторном нажатии на эту кнопку без jQuery. Не подскажите как сделать такое?

Ссылка на код который есть сейчас https://jsfiddle.net/ak2pbq24/10/

Последний раз редактировалось ja0je, 28.03.2018 в 10:22.
Ответить с цитированием
  #2 (permalink)  
Старый 28.03.2018, 11:45
Аватар для void()
Профессор
Отправить личное сообщение для void() Посмотреть профиль Найти все сообщения от void()
 
Регистрация: 11.08.2017
Сообщений: 208

Для анимации нужно использовать какие-либо свойства, имеющие числовые значения.

Сейчас модальное окно прячется и отображается с помощью свойства display: none/block. Это свойство не может быть анимировано.

Попробуйте использовать числовые свойства, такие как opacity, top, left, width, height.

Самый классный эффект получается при неравномерной анимации. Например, сначала стартует увеличение высоты блока, а затем его ширины. Т.е. эти свойства анимируются с разной задержкой и разной скоростью.

Классы для экспериментов: .search_modal и .search_modal_show
+ пригодится свойство transition: all .5s;
Ответить с цитированием
  #3 (permalink)  
Старый 28.03.2018, 12:02
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

ja0je,
https://jsfiddle.net/ak2pbq24/39/
Ответить с цитированием
  #4 (permalink)  
Старый 28.03.2018, 13:38
Новичок на форуме
Отправить личное сообщение для ja0je Посмотреть профиль Найти все сообщения от ja0je
 
Регистрация: 28.03.2018
Сообщений: 2

Это то что мне нужно, большое вам спасибо за то что ответили)
Ответить с цитированием
Ответ


Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как сделать, чтобы при клике на кнопку «назад» с андройда юзер не вылетел с сайта? drkrol Общие вопросы Javascript 4 26.06.2017 05:12
Как вы относитесь к наркоманам? Maxmaxmaximus7 Оффтопик 7 05.02.2014 13:29
Как сделать, чтобы после обновления открывался нужный раздел Mukhtar Events/DOM/Window 24 01.03.2013 03:34
Как сделать чтобы форум прогружался прежде, чем информеры? schipun Ваши сайты и скрипты 2 01.02.2013 23:47
как сделать выпадающий список, чтобы второй зависил от значения первого???? zsaz jQuery 2 16.07.2010 20:12