WTF???? Проблема с анимацией
Возможно я упоротный, но какое то хрень творится.
Есть функция, которая отвечает за добаление класса и вызов другой функции которая установит координаты ( переменные top и left не используются ), все хорошо анимация работает. пруф
function showAnimateWin( ) {
var top = ( window.innerHeight - win.offsetHeight ) / 2,
left = ( window.innerWidth - win.offsetWidth ) / 2;
win.classList.add("modal-window-animate");
setTimeout( function (){
end();
}, 0);
};
Но, если сделать так (Просто убрать не используемые переменные), то не анимация не работает, точнее работает, но только 1 раз... пруф
function showAnimateWin( ) {
//var top = ( window.innerHeight - win.offsetHeight ) / 2,
// left = ( window.innerWidth - win.offsetWidth ) / 2;
win.classList.add("modal-window-animate");
setTimeout( function (){
end();
}, 0);
};
Какого фига? |
Да ну бред какой то, так тоже работает анимация
Достаточно просто получить win.offsetHeight
function showAnimateWin( ) {
win.offsetHeight ;
win.classList.add("modal-window-animate");
setTimeout( function (){
end();
}, 0);
};
Что за наркомания.. |
cyber, потому что при получении offsetHeight перерисовывается страничка, поэтому работает. Это такой хак. И setTimeout тут не нужен.
Я сам так делаю:
var elem = document.createElement('div');
elem.className = 'transition';
document.body.appendChild(elem);
elem.clientHeight; //HACK - без него анимации не будет
elem.classList.add('show');
|
Ruslan_xDD, ну так оно должно и без него работать..
Мне больше интересно почему без него не работает |
Ппц короче, так работает
function showAnimateWin( ) {
end();
win.classList.add("modal-window-animate");
};
http://jsfiddle.net/p2wozc8a/9/ Подсказали на stackoverflow , на вопрос почему получил ответ Цитата:
|
|
рони, хм, по сути если я перемещаю окно, а потом добавляю transition то окно должно переместится без анимации, но на практике она работает...
|
рони, что можно почитать на эту тему, про то как работает css анимация?
|
cyber,
по теме ничего не могу добавить |
|
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, время: 21:41. |