Как применить несколько преобразований к одному элементу - PullRequest
Новая
       37

Как применить несколько преобразований к одному элементу

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

У меня есть изображение треугольника, которое я использую для создания mosai c треугольников. Это изображение вращается с преобразованием (вращением) и помещается в сетку. Мне нужно анимировать строки макета, чтобы скользить от разных направлений к их окончательному положению, и я использовал transform (translate). Моя проблема в том, что анимация начинается с изображения в исходной ориентации, а не с повернутой. Как я могу анимировать повернутое изображение?

См. Утвержденное изображение. https://gifyu.com/image/7lbW

РЕДАКТИРОВАТЬ Здесь вы можете найти мой код, я уверен, что есть лучший способ сделать это, но сейчас мне нужно, чтобы это работало, если это возможно. 

#loader-container {
  width: 50vw;
  height: 12vw; 
  max-width: 830px;
  position: relative;
  margin: auto;
}
.top-container {
  position: absolute;
  width: 20vw;
  height: 4vw;
  max-height: 100px;
  max-width: 500px;
  right: 10%;
  margin: 0.25vw;
}
.top {
  display: grid;
  grid-template-columns: repeat(15, 1fr);
  width: 100%;
  height: 100%;
}
.triangle {
  height: 100%;
  width: 100%;
  background-repeat: no-repeat;
  background-size: contain;
}
.blue {
  background-image: url("https://www.hiboucoop-staging.org/wbo/wp-content/uploads/2020/02/blue.gif");
}
.green {
  background-image: url("https://www.hiboucoop-staging.org/wbo/wp-content/uploads/2020/02/green.gif");
}
.grey {
  background-image: url("https://www.hiboucoop-staging.org/wbo/wp-content/uploads/2020/02/gray.gif");
}
.red {
  background-image: url("https://www.hiboucoop-staging.org/wbo/wp-content/uploads/2020/02/red.gif");
}
.yellow {
  background-image: url("https://www.hiboucoop-staging.org/wbo/wp-content/uploads/2020/02/yellow.gif");
}
.topright {
  transform: rotate(90deg);
}
.bottomleft {
  transform: rotate(270deg);
}
.bottomright {
  transform: rotate(180deg);
}
.column1 {
  grid-column: 1;
}
.column2 {
  grid-column: 2;
}
.column3 {
  grid-column: 3;
}
.column4 {
  grid-column: 4;
}
.column5 {
  grid-column: 5;
}
.column6 {
  grid-column: 6;
}
.column7 {
  grid-column: 7;
}
.column8 {
  grid-column: 8;
}
.column9 {
  grid-column: 9;
}
.column10 {
  grid-column: 10;
}
.column11 {
  grid-column: 11;
}
.column12 {
  grid-column: 12;
}
.column13 {
  grid-column: 13;
}
.column14 {
  grid-column: 14;
}
.column15 {
  grid-column: 15;
}
.top .row1 {
  grid-row: 1;
  animation: slideupdown 2s 0.2s backwards;
}
.top .row2 {
  grid-row: 2;
  animation: slideleftright 2s backwards;
}
.top .row3 {
  grid-row: 3;
  animation: sliderightleft 2s backwards;
}
@keyframes slideupdown {
  from {
    transform: translateY(-176px);
    opacity: 0;
  }
  to {
    transform: translateY(0%);
    opacity: 1;
  }
}
@keyframes slidedownup {
  from {
    transform: translateY(176px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes slideleftright {
  from {
    transform: translateX(850px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}
@keyframes sliderightleft {
  from {
    transform: translateX(-850px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}
<div class="top-container">
      <div class="top">
         <div class="triangle topleft green tt01 column1 row3"></div>
         <div class="triangle topright blue tt02 column2 row1"></div>
         <div class="triangle bottomleft yellow column3 row1"></div>
         <div class="triangle bottomright blue column3 row3"></div>
         <div class="triangle topleft red column4 row2"></div>
         <div class="triangle bottomleft grey column4 row3"></div>
         <div class="triangle bottomleft green column5 row1"></div>
         <div class="triangle topleft yellow column6 row2"></div>
         <div class="triangle bottomleft red column6 row3"></div>
         <div class="triangle topleft green column7 row2"></div>
         <div class="triangle bottomright grey column7 row2"></div>
         <div class="triangle topleft blue column7 row3"></div>
         <div class="triangle topright blue column8 row1"></div>
         <div class="triangle topleft yellow column8 row2"></div>
         <div class="triangle bottomright grey column8 row2"></div>
         <div class="triangle topright grey column8 row3"></div>
         <div class="triangle bottomleft red column8 row3"></div>
         <div class="triangle bottomleft yellow column9 row1"></div>
         <div class="triangle topleft red column9 row2"></div>
         <div class="triangle bottomright blue column9 row2"></div>
         <div class="triangle topleft green column9 row3"></div>
         <div class="triangle bottomright green column9 row3"></div>
         <div class="triangle topleft yellow column10 row1"></div>
         <div class="triangle bottomright red column10 row1"></div>
         <div class="triangle topleft green column10 row2"></div>
         <div class="triangle bottomright grey column10 row2"></div>
         <div class="triangle bottomleft blue column10 row3"></div>
         <div class="triangle bottomleft yellow column11 row1"></div>
         <div class="triangle topleft yellow column11 row2"></div>
         <div class="triangle bottomright grey column11 row2"></div>
         <div class="triangle topleft red column11 row3"></div>
         <div class="triangle bottomright grey column11 row3"></div>
         <div class="triangle bottomleft green column12 row1"></div>
         <div class="triangle bottomleft blue column12 row2"></div>
         <div class="triangle topleft green column12 row3"></div>
         <div class="triangle bottomright grey column12 row3"></div>
         <div class="triangle bottomleft grey column13 row3"></div>
         <div class="triangle bottomright blue column14 row3"></div>
         <div class="triangle bottomleft red column15 row3"></div>
      </div>
   </div>

https://codepen.io/RiccioBastardo/pen/mdJPVyg

1 Ответ

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

Не видя ваш код, трудно ответить. Но я думаю, что причина этого в том, что transform перезаписывается в анимации.

Вот простой рабочий пример: 

<div class="triangle"></div>

.triangle {
  border: 20px transparent solid;
  border-right-color: red;
  display: inline-block;
  animation-name: example;
  animation-duration: 1s;
  transform: rotate(45deg);
  animation-fill-mode: forwards;

}

@keyframes example {
  from {
    transform: translate(0px, 0px) rotate(45deg);
  }
  to {
    transform: translate(1000px, 0px) rotate(45deg);
  }
}

[EDIT] Вот мои предложения после того, как автор поделился кодом.

По сути, вы объявляете transform более одного раза для данного элемента. в CSS последнее вхождение отменяет все предыдущие вхождения. Чтобы решить эту проблему, вам нужно обойти это. Есть четыре способа сделать это:

  1. Конвертировать 
<div class="triangle topleft green column7 row2"></div>

во что-то вроде 

<div class="triangle-holder topleft column7 row2">
    <div class="triangle green"></div>
</div>

Это позволяет вам иметь два разных преобразовывает два разных элемента, не перекрывая друг друга (как то, что происходит в исходном коде). transform: rotate() применяется к .triangle, а transform: translate() применяется к .triangle-holder

Полностью избавьтесь от transform: rotate() (а также от фонового изображения), используя границы (см. Пример выше). Это будет только работать для поворота на 90 градусов

Избавиться от transform: translate() и использовать поле или верх / лево для позиционирования.

Явно анимируйте каждый треугольник, чтобы объединить ваши преобразования в одно преобразование.

Я бы рекомендовал второй вариант, так как он требует минимальных изменений в вашем коде, а AFAIK - браузер совместимый способ создания CSS треугольников.

...