Malleys, эм это все примитивная фигня, меня интересуют более технические детали
|
Цитата:
Пример http://codepen.io/Malleys/pen/yyVroo |
Malleys, в таких случаях - да. Но если элемент только добавлен в DOM, то анимация не сработает, пока не дёрнешь какой-нибудь геттер для перерисовки. Ну или в setTimeout можно обернуть, так как он сработает минимум через 4мс - за это время браузер уже сам успевает перерисовать всё. :)
|
От нечего делать набросал свой вариант с окошком. :)
http://learn.javascript.ru/play/X0G0c <!DOCTYPE HTML> <html> <head> <style type="text/css"> .window { background: #FFF; border: 1px solid #DDD; border-radius: 10px; box-shadow: 0 0 15px #CCC; left: 0; height: 200px; margin: 0 auto; opacity: 0; position: fixed; right: 0; top: -200px; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s; -ms-transition: all 0.5s; transition: all 0.5s; -webkit-transform: scale(0); -moz-transform: scale(0) -o-transform: scale(0); -ms-transform: scale(0); transform: scale(0); visiblity: hidden; width: 300px; } .window button { background: #EEE; border: none; border-radius: 0 0 10px 10px; bottom: 0; color: #AAA; cursor: pointer; height: 25px; margin: 0; outline: none; position: absolute; width: 100%; } .window-show { opacity: 1; top: 20%; -webkit-transform: scale(1); -moz-transform: scale(1) -o-transform: scale(1); -ms-transform: scale(1); transform: scale(1); visibility: visible; } </style> </head> <body> <input onclick="showWindow(true)" type="button" value="Show Window"> <div class="window"> <button onclick="showWindow(false)">Close window</button> </div> <script type="text/javascript"> var windowSelf = document.querySelector('.window'); function showWindow(to) { windowSelf.classList.toggle('window-show', to); }; </script> </body> </html> |
Цитата:
http://javascript.ru/forum/css-html-...eflow-bug.html |
Ruslan_xDD,
http://jsfiddle.net/dyL78o6k/3/ с моим скриптом) |
cyber, а чего по "Close" анимацию не сделал? :) Можно по "Close" сделать просто плавное исчезновение fade, эффектно получится. :)
|
Ruslan_xDD, потом допилю, основные фичи поправил, пока основная фича лёгкое управление анимацией вроде получилась + минимальные размеры https://github.com/cyberua/modalJS
|
Цитата:
|
Octane, збс, обожаю этот зоопарк.
спасибо, поправил. |
Часовой пояс GMT +3, время: 13:31. |