kulaeff

В вашем случае можно обойтись `border-right-color` и `border-bottom-color`.

https://jsfiddle.net/4bsv03t8/

Все просто, но нужен js.

При наведении на дочерний блок, получаете его координаты и устанавливаете эти координаты блок, который должен появляться поверх дочернего.

https://jsfiddle.net/wxrbavsu/

Теория
Делаем два слоя A и B, которые будут раздвигающимися половинками. Каждый из этих слоев имеет высоту H и `overflow: hidden`. Делаем два слоя с одинаковым содержимым X и Y, каждый из которых имеет высоту H*2 и выравнивание текста по вертикали. Вставляем слой X в слой A и абсолютно позиционируем его по верхнему краю. Вставляем слой Y в слой B и абсолютно позиционируем его по нижнему краю. Таким образом мы добьемся того, что слои A и B это как будто бы один слой с монолитным содержимым. Под слоями A и B размещаем слой C, который и будет появляется при "разрыве" слоев А и B.

Схема


Реализация
https://jsfiddle.net/vwdfqkph/1/

За кроссбраузерность не отвечаю, ибо используются флексы, но можно переделать и без флексов. Главное суть, надеюсь, донес.

Нужно подключить еще также и CSSPlugin. Либо вместо TweenLite использовать TweenMax, который уже его включает.

Использовать CommonChunksPlugin. Но этот плагин нужен, если пользуетесь вепаком 3 версии или ниже. В 4 версии есть нативная поддержка code splitting.

Я хз что там с ангуляром, но пора бы научиться пользоваться консолью, в частности, вкладкой Performance. Отличная штука. На этой вкладке вы увидите всю подноготную, все, так сказать, кишки, в том числе функции, на выполнение которых уходит много времени.

В общем случае, для решения этой задачи нам нужно две функции: функция, проверяющая строку на соответствие всех элементов значению (функция 1) и функция, поворачивающая массив на 90 градусов (функция 2).

Таким образом, чтобы проверить, состоит ли хотя бы одна строка матрицы из элементов Х нужно использовать функцию 1. Чтобы проверить, состоит ли хотя бы один столбец из элементов Х, нужно сначала повернуть массив, используя функцию 2, затем использовать функцию 1.

Примерное решение

Вариант с animation вам уже показал товарищ 0xD34F. Если нужен именно transition, то вы создаете блок, у которого изначально в CSS указан opacity: 0, затем через маленький промежуток времени вы задаете opacity: 1. В коде это будет примерно так:

div {
  opacity: 0;
}
div.active {
  opacity: 1;
}

var div = document.createElement('div')

document.body.appendChild(div)

setTimeout(function() {
  div.classList.add('active');
}, 10)

Вместо setTimeout можно использовать requestAnimationFrame. Если вы используете jQuery, то там есть функция animate() или связка функций queue()\dequeue().

Пример

https://codepen.io/anon/pen/GQjaVx

Видимо ни одно из условий не срабатывает. Поставьте console.log(1) в каждый блок if и вы поймете, где проблема.

Вам не нужен цикл. Вот так надо:

$(e.currentTarget).find('.block-click').addClass('open');

Вам нужна такая чтука: Mutation Observer.

Зависит от того, что используется на проекте. Если просто jQuery, то ваша структура вполне годится. Если юзается какой-то сборщик, типа вебпака, то я бы засунул все в src, а выхлоп складывался бы туда, где лежит index.html.