css.js. Анимация появления блока с изменением положения соседних элементов

271

09 февраля 2018, 18:50

Заставить блок (#visible) появится таким образом, чтобы он подвинул верхний блок с текстом в вверх, а нижний блок в низ и сам отрисовался аналогичным образом, то есть из своего центра вверх и вниз. Долго мучаюсь, не выходит.

#oblast { 
  width: 500px; 
} 
 
#one { 
 
} 
 
#visible { 
  height: 300px; 
  background: blue; 
  display: none; 
} 
#two { 
 
}

<div id ="oblast"> 
<div id="one">Современный суперкомпьютер работает со скоростью 36,8 петафлоп в секунду, то есть примерно вдвое быстрее человеческого мозга. Такая производительность стала возможна благодаря использованию ИИ: он переписывает собственную программу, в первую очередь инструкции, повышающие его способность к усвоению знаний, решению задач и принятию решений. Одновременно он отлаживает код, отыскивает и исправляет ошибки — и измеряет собственный коэффициент интеллекта (IQ) с помощью тестов. На создание каждого нового варианта программы уходит всего несколько минут. Интеллект компьютера растёт экспоненциально по круто восходящей кривой. Дело в том, что за каждую итерацию ИИ повышает свой интеллект на 3%. Улучшение, достигнутое в каждой итерации, содержит и все предыдущие улучшения. В процессе развития Busy Child, как учёные назвали ИИ, был подключён к интернету и собрал не один развитие продолжается.</div> 
<div id="visible"></div> 
<div id="two">экзабайт данных (один экзабайт — это миллиард миллиардов символов), представляющих знания человечества из области мировой политики, математики, искусства и различных наук. Затем, предвидя скорый интеллектуальный взрыв, создатели ИИ отключили суперкомпьютер от интернета и других сетей, чтобы изолировать его от внешнего мира или другого компьютера. Вскоре, к радости учёных, терминал, на котором отображается работа ИИ, показал, что искусственный интеллект превзошёл интеллектуальный уровень человека — «универсальный человекоподобный интеллект» (УЧИ или по-английски Artificial General Intelligence — AGI). Ещё через некоторое время он стал умнее человека в десять раз, затем в сто. Всего за двое суток он становится в тысячу раз умнее любого человека, и его  
</div></div>

Answer 1

var visible = document.getElementById("visible"); 
var one = document.getElementById("one"); 
var two = document.getElementById("two"); 
 
 
one.addEventListener("click", show); 
 
function show(){ 
visible.style.display = "block"; 
setTimeout(function(){ 
	visible.style.height = "300px"; 
	one.style.marginTop ="-150px"; 
},30); 
}

#oblast { 
  width: 500px; 
} 
 
#one { 
border: 1px solid; 
position: relative; 
transition: 1s; 
} 
 
#visible { 
  height: 0px; 
  background: blue; 
  display: none; 
  transition: 1s; 
} 
#two { 
 
}

 <div id ="oblast"> 
<div id="one">Современный суперкомпьютер работает со скоростью 36,8 петафлоп в секунду, то есть примерно вдвое быстрее человеческого мозга. Такая производительность стала возможна благодаря использованию ИИ: он переписывает собственную программу, в первую очередь инструкции, повышающие его способность к усвоению знаний, решению задач и принятию решений. Одновременно он отлаживает код, отыскивает и исправляет ошибки — и измеряет собственный коэффициент интеллекта (IQ) с помощью тестов. На создание каждого нового варианта программы уходит всего несколько минут. Интеллект компьютера растёт экспоненциально по круто восходящей кривой. Дело в том, что за каждую итерацию ИИ повышает свой интеллект на 3%. Улучшение, достигнутое в каждой итерации, содержит и все предыдущие улучшения. В процессе развития Busy Child, как учёные назвали ИИ, был подключён к интернету и собрал не один развитие продолжается.</div> 
<div id="visible"></div> 
<div id="two">экзабайт данных (один экзабайт — это миллиард миллиардов символов), представляющих знания человечества из области мировой политики, математики, искусства и различных наук. Затем, предвидя скорый интеллектуальный взрыв, создатели ИИ отключили суперкомпьютер от интернета и других сетей, чтобы изолировать его от внешнего мира или другого компьютера. Вскоре, к радости учёных, терминал, на котором отображается работа ИИ, показал, что искусственный интеллект превзошёл интеллектуальный уровень человека — «универсальный человекоподобный интеллект» (УЧИ или по-английски Artificial General Intelligence — AGI). Ещё через некоторое время он стал умнее человека в десять раз, затем в сто. Всего за двое суток он становится в тысячу раз умнее любого человека, и его  
</div></div>