Можно ли анимировать свойство области сетки? - PullRequest
Новая
       14

Можно ли анимировать свойство области сетки?

0 голосов
/ 26 марта 2019

У меня есть оверлейный элемент для 2 кнопок, и я пытаюсь реализовать своего рода активное состояние, изменяя свойство grid-area элемента, чтобы оно совпадало со свойством кнопки, на которую была нажата кнопка.

Мне было интересно, можно ли анимировать это изменение и использовать какую-то анимацию слайдов. 

const overlay = document.querySelector('.overlay');
const hello = document.querySelector('.btn-1');
const world = document.querySelector('.btn-2');

hello.addEventListener('click', e => {
  overlay.style.gridArea = '1 / 1 / -1 / 2';
});

world.addEventListener('click', e => {
  overlay.style.gridArea = '1 / 2 / -1 / -1';
});
.grid {
  width: 1000px;
  display: grid;
  grid-template: 1fr / repeat(2, min-content);
}

.overlay {
  background-color: cornflowerblue;
  width: 100%;
  height: 100%;
  grid-area: 1 / 1 / -1 / 2;
}

.btn {
  text-align: center;
  width: 100px;
  font-size: 30px;
  font-family: sans-serif;
  padding: 20px 40px;
  cursor: pointer;
}

.btn-1 {
  grid-area: 1 / 1 / -1 / 2;
}

.btn-2 {
  grid-area: 1 / 2 / 2 / -1;
}
<div class="grid">
  <div class="overlay"></div>
  <span class="btn btn-1">Hello</span>
  <span class="btn btn-2">World</span>
</div>

1 Ответ

0 голосов
/ 26 марта 2019

Хорошо, я нашел хорошую библиотеку, которая может выполнить это очень легко.По какой-то причине я не могу включить ссылку cdn в сниппет, но на github проект называется animate-css-grid . 

const overlay = document.querySelector('.overlay');
const hello = document.querySelector('.btn-1');
const world = document.querySelector('.btn-2');
const grid = document.querySelector('.grid');

animateCSSGrid.wrapGrid(grid, {duration : 600});
hello.addEventListener('click', e => {
  if (overlay.classList.contains('overlay--2')) {
    overlay.classList.remove('overlay--2');
  }
});

world.addEventListener('click', e => {
  if (!overlay.classList.contains('overlay--2')) {
    overlay.classList.add('overlay--2');
  }
});
.grid {
  width: 1000px;
  margin: 100px auto;
  display: grid;
  grid-template: 1fr / repeat(2, min-content);
}

.overlay {
  background-color: cornflowerblue;
  width: 100%;
  height: 100%;
  grid-area: 1 / 1 / -1 / 2;
  z-index: -1;
}

.overlay--2 {
  grid-area: 1 / 2 / -1 / -1;
}

.btn {
  text-align: center;
  width: 100px;
  font-size: 30px;
  font-family: sans-serif;
  padding: 20px 40px;
  cursor: pointer;
}

.btn-1 {
  grid-area: 1 / 1 / -1 / 2;
}

.btn-2 {
  grid-area: 1 / 2 / 2 / -1;
}
<div class="grid">
  <div class="overlay"></div>
  <span class="btn btn-1">Hello</span>
  <span class="btn btn-2">World</span>
</div>
...