06.01.2015, 17:48
|
 |
I am Student
|
|
Регистрация: 17.12.2011
Сообщений: 4,415
|
|
|
Malleys, эм это все примитивная фигня, меня интересуют более технические детали
__________________
|
Цитата:
|
|
Если ограничения и условия описываются как "коробка", то хитрость в том что бы найти именно коробку... Не думайте о чем то глобальном - найдите коробку.
|
|
|
06.01.2015, 18:26
|
 |
Профессор
|
|
Регистрация: 20.12.2009
Сообщений: 1,714
|
|
|
Цитата:
|
elem.clientHeight; //HACK - без него анимации не будет
почему без него не работает
|
На мой взгляд работает, даже если elem.clientHeight случайно пропустить.
Пример http://codepen.io/Malleys/pen/yyVroo |
|
06.01.2015, 18:34
|
 |
Профессор
|
|
Регистрация: 30.04.2012
Сообщений: 3,018
|
|
Malleys, в таких случаях - да. Но если элемент только добавлен в DOM, то анимация не сработает, пока не дёрнешь какой-нибудь геттер для перерисовки. Ну или в setTimeout можно обернуть, так как он сработает минимум через 4мс - за это время браузер уже сам успевает перерисовать всё. 
Последний раз редактировалось ruslan_mart, 06.01.2015 в 18:36.
|
|
06.01.2015, 19:07
|
|
Профессор
|
|
Регистрация: 30.04.2012
Сообщений: 3,018
|
|
От нечего делать набросал свой вариант с окошком.
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>
|
|
06.01.2015, 20:05
|
|
sinistral
|
|
Регистрация: 28.03.2011
Сообщений: 5,418
|
|
Сообщение от cyber
|
|
рони, что можно почитать на эту тему, про то как работает css анимация?
|
исчо
Opera reflow bug |
|
07.01.2015, 15:57
|
|
I am Student
|
|
Регистрация: 17.12.2011
Сообщений: 4,415
|
|
__________________
|
Цитата:
|
|
Если ограничения и условия описываются как "коробка", то хитрость в том что бы найти именно коробку... Не думайте о чем то глобальном - найдите коробку.
|
Последний раз редактировалось cyber, 07.01.2015 в 16:08.
|
|
07.01.2015, 16:53
|
|
Профессор
|
|
Регистрация: 30.04.2012
Сообщений: 3,018
|
|
cyber, а чего по "Close" анимацию не сделал? Можно по "Close" сделать просто плавное исчезновение fade, эффектно получится.
|
|
07.01.2015, 18:29
|
|
I am Student
|
|
Регистрация: 17.12.2011
Сообщений: 4,415
|
|
Ruslan_xDD, потом допилю, основные фичи поправил, пока основная фича лёгкое управление анимацией вроде получилась + минимальные размеры https://github.com/cyberua/modalJS
__________________
|
Цитата:
|
|
Если ограничения и условия описываются как "коробка", то хитрость в том что бы найти именно коробку... Не думайте о чем то глобальном - найдите коробку.
|
|
|
07.01.2015, 19:20
|
|
|
|
Регистрация: 10.07.2008
Сообщений: 3,873
|
|
|
Сообщение от cyber
|
transitions = {
'transition':'transitionend',
'OTransition':'oTransitionEnd',
'MozTransition':'transitionend',
'WebkitTransition':'webkitTransitionEnd'
};
|
тебе привет от android 4.0–4.1, в которых есть CSS-свойство transition, но нет события transitionend, есть только webkitTransitionEnd
Последний раз редактировалось Octane, 07.01.2015 в 19:57.
Причина: typo
|
|
07.01.2015, 19:41
|
|
I am Student
|
|
Регистрация: 17.12.2011
Сообщений: 4,415
|
|
|
Octane, збс, обожаю этот зоопарк.
спасибо, поправил.
__________________
|
Цитата:
|
|
Если ограничения и условия описываются как "коробка", то хитрость в том что бы найти именно коробку... Не думайте о чем то глобальном - найдите коробку.
|
|
|
|
|
