CSS - Переключить несколько 3D-анимации - PullRequest
Новая
       56

CSS - Переключить несколько 3D-анимации

0 голосов
/ 29 февраля 2020

Я пытаюсь получить две 3d-карты, которые вызывают щелчок кнопкой переключения. Проблема состоит только в том, что кнопка первой карты в данный момент переключает анимацию трехмерного переключения, тогда как кнопка второй карты этого не делает.

Я следую этому уроку, но в настоящее время он использует только одну https://3dtransforms.desandro.com/card-flip

let flip = document.querySelector('.flip');
let card = document.querySelector('.card');

flip.addEventListener('click', function() {
  card.classList.toggle('is-flipped');
});
/*The 3d Area Boundary*/

.container {
  box-sizing: border-box;
  width: 100%;
  height: 170px;
  padding: 0;
  perspective: 800px;
}


/*The 3d Object - Flipping Card */

.card {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transform-origin: center right;
  transition: transform 1s;
}


/*Sets Card face 2d, absolute and invisible
when until flipped*/

.card-face {
  position: absolute;
  height: 100%;
  width: 100%;
  backface-visibility: hidden;
}

.front-card {}

.back-card {
  transform: rotateY(180deg);
}

.card.is-flipped {
  transform: rotateY(180deg);
  transform: translateX(-100%) rotateY(-180deg);
}
<div class="container">
  <div class="card">
    <div class="card-face front-card">
      <p>Some Text.</p>
      <a class="uk-button uk-button-default" class="flip">Flip</a>
    </div>
    <div class="card-face back-card">
      <p>Some MORE TEXT.</p>
      <a class="uk-button uk-button-default" class="flip">Flip</a>
    </div>
  </div>
</div>

1 Ответ

1 голос
/ 29 февраля 2020

Проблема в том, что только кнопка первой карты в данный момент переключает анимацию трехмерного переключения, тогда как кнопка второй карты не

Нет, ваш код выдает следующую ошибку:

Uncaught TypeError: Невозможно прочитать свойство 'addEventListener' с нулевым значением

Наличие одного и того же атрибута несколько раз в элементах (класс в элементе ) будет просто игнорироваться все атрибуты, кроме первого.

querySelector() возвращает только первый соответствующий элемент. Вы должны нацелить все элементы с классом, вы можете сделать это, используя querySelectorAll(). Затем я oop через них присоединю событие ко всем из них. 

let flip = document.querySelectorAll('.flip');
let card = document.querySelector('.card');

flip.forEach(function(el){
  el.addEventListener('click', function() {
    card.classList.toggle('is-flipped');
  });
});
/*The 3d Area Boundary*/

.container {
  box-sizing: border-box;
  width: 100%;
  height: 170px;
  padding: 0;
  perspective: 800px;
}


/*The 3d Object - Flipping Card */

.card {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transform-origin: center right;
  transition: transform 1s;
}


/*Sets Card face 2d, absolute and invisible
when until flipped*/

.card-face {
  position: absolute;
  height: 100%;
  width: 100%;
  backface-visibility: hidden;
}

.front-card {}

.back-card {
  transform: rotateY(180deg);
}

.card.is-flipped {
  transform: rotateY(180deg);
  transform: translateX(-100%) rotateY(-180deg);
}
<div class="container">
  <div class="card">
    <div class="card-face front-card">
      <p>Some Text.</p>
      <a class="uk-button uk-button-default flip">Flip</a>
    </div>
    <div class="card-face back-card">
      <p>Some MORE TEXT.</p>
      <a class="uk-button uk-button-default flip" >Flip</a>
    </div>
  </div>
</div>
...