Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 28.10.2015, 13:03
Интересующийся
Отправить личное сообщение для ekkl-82 Посмотреть профиль Найти все сообщения от ekkl-82
 
Регистрация: 09.11.2013
Сообщений: 17

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
Ответить с цитированием
  #2 (permalink)  
Старый 28.10.2015, 13:38
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 12,251

Сообщение от ekkl-82
Я считаю, что красивее будет, когда содержимое блока не будет двигаться при анимации, а будет изменяться только его размер.
Тогда внутри блока нужно иметь некий контейнер, достаточной высоты, дабы контент не "сминался"...
А манипулируя высотой материнского элемента содержимое будет скрываться или показываться...
Ответить с цитированием
  #3 (permalink)  
Старый 28.10.2015, 13:46
Интересующийся
Отправить личное сообщение для ekkl-82 Посмотреть профиль Найти все сообщения от ekkl-82
 
Регистрация: 09.11.2013
Сообщений: 17

А можно пример... А то я уже столько перепробовал. И top и разнообразные position...
И все равно получается, что содержимое вначале сильно поднято вверх, и только при достаточном размере родительского контейнера опускается вниз. И никакие top: 10px не помогли..
Ответить с цитированием
  #4 (permalink)  
Старый 28.10.2015, 14:17
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 12,251

Сообщение от ekkl-82
А можно пример...
Тестовый пример кагбэ ожидается от тебя... Вот на нем можно будет что-то показать.
Ответить с цитированием
  #5 (permalink)  
Старый 28.10.2015, 14:26
Интересующийся
Отправить личное сообщение для ekkl-82 Посмотреть профиль Найти все сообщения от ekkl-82
 
Регистрация: 09.11.2013
Сообщений: 17

http://jsbin.com/ricuco В первой ссылке... Не работает...
http://jsbin.com/zihimo То же самое (только сам раскрывающийся элемент) но работает...
Вот в чём между ними различие
Ответить с цитированием
  #6 (permalink)  
Старый 28.10.2015, 14:31
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 12,251

Пример кагбэ должен быть выложен тут... Зачем кому-то чужой сайт...
Ответить с цитированием
  #7 (permalink)  
Старый 28.10.2015, 14:43
Интересующийся
Отправить личное сообщение для ekkl-82 Посмотреть профиль Найти все сообщения от ekkl-82
 
Регистрация: 09.11.2013
Сообщений: 17

А что пример занимает достаточно много, ничего?
Ответить с цитированием
  #8 (permalink)  
Старый 28.10.2015, 14:50
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 12,251

Сообщение от ekkl-82
ничего?
У нас на работе стоит следилка за инетом, т.ч. я на сторонние ресурсы не хожу, дабы не объяснять (лично директору) чего я там забыл...
Ответить с цитированием
  #9 (permalink)  
Старый 29.10.2015, 14:52
Интересующийся
Отправить личное сообщение для ekkl-82 Посмотреть профиль Найти все сообщения от ekkl-82
 
Регистрация: 09.11.2013
Сообщений: 17

<!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();
Все работает нормально...

Последний раз редактировалось ekkl-82, 29.10.2015 в 15:11.
Ответить с цитированием
  #10 (permalink)  
Старый 29.10.2015, 15:45
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 12,251

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

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Помогите с рандомными значениями злобная_пипа Элементы интерфейса 6 02.10.2015 20:11
название не придумал. Чуть подправит css Гробовщик (X)HTML/CSS 5 02.10.2013 12:55
Оцените, пожалуйста код вёрстки OlegALL Ваши сайты и скрипты 18 26.07.2011 08:35
JQuery CSS анализатор javascript jQuery 2 15.08.2010 20:27
Подскажите по CSS меню Александр_1988 Элементы интерфейса 1 17.05.2010 10:58