Javascript-форум - WTF???? Проблема с анимацией

Javascript-форум (https://javascript.ru/forum/)

- Оффтопик (https://javascript.ru/forum/offtopic/)

- - WTF???? Проблема с анимацией (https://javascript.ru/forum/offtopic/52776-wtf-problema-s-animaciejj.html)

Malleys, эм это все примитивная фигня, меня интересуют более технические детали

Цитата:

elem.clientHeight; //HACK - без него анимации не будет

почему без него не работает

На мой взгляд работает, даже если elem.clientHeight случайно пропустить.
Пример 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>

Цитата:

Сообщение от cyber (Сообщение 349878)

рони, что можно почитать на эту тему, про то как работает css анимация?

исчо
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

Цитата:

Сообщение от cyber

transitions = {
    'transition':'transitionend',
    'OTransition':'oTransitionEnd',
    'MozTransition':'transitionend',
    'WebkitTransition':'webkitTransitionEnd'
};

тебе привет от android 4.0–4.1, в которых есть CSS-свойство transition, но нет события transitionend, есть только webkitTransitionEnd

Octane, збс, обожаю этот зоопарк.
спасибо, поправил.