Javascript-форум (https://javascript.ru/forum/)
-   (X)HTML/CSS (https://javascript.ru/forum/xhtml-html-css/)
-   -   css animation height (https://javascript.ru/forum/xhtml-html-css/59111-css-animation-height.html)

ekkl-82 28.10.2015 14:03

css animation height
 
Есть блок, который я хочу анимировать с помощью css
#confirm {
  position: absolute;
  width: 280px;
  height: 0;
  border: 1px grey solid;
  background-color: #f9f0ff;
  z-index: 1000;
  display: inline-block;
  border-radius: 6px;
  transition: height 7s;
  overflow: hidden; 
  padding: -1px;
  text-indent: 0;
  box-sizing: border-box;

#confirm.f-dropped {
  height: 160px;
}

#confirm .content {
  margin: 1em;
  display: inline-block;
  overflow: hidden;
}
}

По некоторому событию я средствами JS добавляю .f-dropped
Но анимация получается некрасивой... Вначале, когда высота блока небольшая, его содержимое сильно сдвинуто вверх... И потом опускается вниз. Я считаю, что красивее будет, когда содержимое блока не будет двигаться при анимации, а будет изменяться только его размер.
Вот пример. http://jsbin.com/ricuco

ksa 28.10.2015 14:38

Цитата:

Сообщение от ekkl-82
Я считаю, что красивее будет, когда содержимое блока не будет двигаться при анимации, а будет изменяться только его размер.

Тогда внутри блока нужно иметь некий контейнер, достаточной высоты, дабы контент не "сминался"...
А манипулируя высотой материнского элемента содержимое будет скрываться или показываться...

ekkl-82 28.10.2015 14:46

А можно пример... А то я уже столько перепробовал. И top и разнообразные position...
И все равно получается, что содержимое вначале сильно поднято вверх, и только при достаточном размере родительского контейнера опускается вниз. И никакие top: 10px не помогли..

ksa 28.10.2015 15:17

Цитата:

Сообщение от ekkl-82
А можно пример...

Тестовый пример кагбэ ожидается от тебя... :) Вот на нем можно будет что-то показать.

ekkl-82 28.10.2015 15:26

http://jsbin.com/ricuco В первой ссылке... Не работает...
http://jsbin.com/zihimo То же самое (только сам раскрывающийся элемент) но работает...
Вот в чём между ними различие

ksa 28.10.2015 15:31

Пример кагбэ должен быть выложен тут... Зачем кому-то чужой сайт...

ekkl-82 28.10.2015 15:43

А что пример занимает достаточно много, ничего?

ksa 28.10.2015 15:50

Цитата:

Сообщение от ekkl-82
ничего?

У нас на работе стоит следилка за инетом, т.ч. я на сторонние ресурсы не хожу, дабы не объяснять (лично директору) чего я там забыл... :)

ekkl-82 29.10.2015 15:52

<!DOCTYPE html>
<meta name="robots" content="noindex">
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/zepto/1.0/zepto.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
<style id="jsbin-css">
#confirm {
  position: absolute;
  width: 280px;
  height: 0;
  border: 1px #230D33 solid;
  z-index: 1000;
  display: inline-block;
  border-radius: 6px;
  transition: height 7s;
  overflow: hidden; 
  text-indent: 0;
  box-sizing: border-box;
  background: linear-gradient(#F9F0FF 70%, #EAC9FF);
  box-shadow: 0 0 16px rgba(0,0,0,0.5)
}
#confirm.f-dropped {
  height: 160px;
}

#confirm .content {
 width:100%;
 box-sizing: border-box;
 font-size: 0.em;
}
</style>
</head>
<body>
  <div style="margin-left: 100px;">
 <p><a data-confirm href="aaa">confirm</a>
          </p>
           <p><a data-confirm href="aaa">confirm</a>
          </p>
           <p><a data-confirm href="aaa">confirm</a>
          </p>
           <p><a data-confirm href="aaa">confirm</a>
          </p>
           <p><a data-confirm href="aaa">confirm</a>
          </p>
    </div>
<script id="jsbin-javascript">
(function($, window) {
  window.Confirm = {
    name: 'confirm',
    version: '{{version}}',
    init: function(scope) {
      var self;
      self = this;
      this.scope = scope;
      if ($('body').has('#confirm').length === 0) {
        this.confirm = $('<span id="confirm"><span class="content">Вы уверенны в этом??? <a href="#">Удалить</a> <a href="#" role="cancel">Отменить</a> </span></span>').appendTo('body').hide();
      }
      $(this.scope).off('.confirm').on('click.confirm', '[data-confirm]', function(e) {
        self.toggle(e.target);
        e.preventDefault();
      });
      $('body').off('.confirm').on('click.confirm', function(e) {
        if ($(e.target).is('[data-confirm]')) {
          return;
        }
        return self.hide();
      }).on('keypress.confirm', function(e) {
        if (e.keyCode === 27) {
          return self.hide();
        }
      });
      $(this.confirm).off('.confirm').on('click.confirm', function(e) {
        return e.stopPropagation();
      });
    },
    show: function(el) {
      var self;
      self = this;
      $(this.confirm).show();
      return $(this.scope).on('click.confirm', function(e) {
        if (!$(e.target).is('#confirm')) {
          $(self.scope).off('.dialog');
          self.hide();
          return e.preventDefault();
        }
      });
    },
    hide: function() {
      var self;
      self = this;
      setTimeout(function() {
        if (!$(self.confirm).hasClass('f-dropped')) {
          $(self.confirm).hide();
        }
      }, 7000);
      return $(this.confirm).removeClass('f-dropped');
    },
    toggle: function(el) {
      var cent, left;
      cent = (parseInt($(this.confirm).css('width')) - $(el).width()) / 2;
      left = ($(el).offset().left) - cent;
      $(this.confirm).removeClass('f-dropped').insertAfter(el).show().css('left', left).addClass('f-dropped');
      $('#confirm a[role="cancel"]').focus();
      return $('#confirm .content').css('padding', '1em').css('display', 'inline-block');
    }
  };
})(Zepto, window);

Confirm.init(document);

</script>
</body>
</html>


Вот так кратко...
Удалось установить проблему. Если нет
$('#confirm a[role="cancel"]').focus();
Все работает нормально...

ksa 29.10.2015 16:45

Цитата:

Сообщение от ekkl-82
Все работает нормально...

Т.е. теперь нормально?

Я примерчик твой запустил... Там вроде не сминается ничего....


Часовой пояс GMT +3, время: 13:20.