1

Почему код не выполняется по очереди? Делает одновременно. Как его можно заставить выполнять сначала разворот, потом уже увеличение высоты и ширины контейнера .cube, и потом уже увеличение высоты и ширины у самой стороны #side2 (к примеру). Свойство delay не работает, не знаю почему, может не туда ставлю. Подскажите пожалуйста если можете.

JS:

$(".link2").on("click", function() {
  $('.cube').css("transform", "rotate3d(0,1,0,270deg)");
  $('.main-cube').css("top", "10%");
  $(".cube").addClass("active-cube");
  $('#side2').delay(2500)
             .animate({ width: "90vw" }, 1000 )
             .animate({ height: "90vh" }, 1000 );
});

CSS:

.active-cube {
  width: 90vw;
  height: 45vh;
}
2
  • Я не вижу анимационного изменения размеров .cube
    – Yuri
    4 мар 2017 в 10:31
  • анимация там не нужна. С помощью addclass просто расширяется контейнер, в котором уже дается место для анимационного расширения #side2 5 мар 2017 в 13:39

1 ответ 1

0

delay работает, ваша ошибка не воспроизводится:

$(".link2").on("click", function() {
  $('.container').css("transform", "rotate3d(0,1,0,270deg)");
  $(".container").addClass("active-cube");
  $('#side2').delay(2500)
             .animate({ width: "90vw" }, 1000 )
             .animate({ height: "90vh" }, 1000 );
});
BODY {
  perspective: 500px;
  perspective-origin: center -5em;
  }
.side,
.container {
  width: 10em;
  height: 10em;
  }

.container {
  margin: 5em auto 0;
  border: 2px dotted white;
  transform-style: preserve-3d;
  transition: transform ease 1s;
  }
  .container:before,
  .container:after {
    content: "";
    display: block;
    position: absolute;
    width: 10em;
    height: 10em;
    border: 2px dotted white;
    }
    .container:before {
      transform: rotateX(90deg);  
      }
    .container:after {
      transform: rotatey(90deg);  
      }

.side {
  position: absolute;
  width: 10em;
  height: 10em;
  border: 2px solid white;
  opacity: .7;
  }

.back {
  transform: translateZ(-5em);
  background: orange;
  }
.left {
  transform: translateX(-5em) rotateY(90deg);
  background: lightgreen;
  }
.right {
  transform: translateX(5em) rotateY(90deg);
  background: yellowgreen;
  }
.top {
  transform: translateY(-5em) rotateX(90deg);
  background: skyblue;
  }
.bottom {
  transform: translateY(5em) rotateX(90deg);
  background: steelblue;
  }
.front {
  transform: translateZ(5em);
  background: gold;
  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" class="link2">link 2</a>
 
 <div class="container">
    <div class="back side"></div>
    <div class="left side"></div>
    <div id="side2" class="right side"></div>
    <div class="top side"></div>
    <div class="bottom side"></div>
    <div class="front side"></div>
  </div>

2
  • Откуда вы все эти стили взяли?
    – Yuri
    4 мар 2017 в 11:08
  • Интересный у вас подход с контейнером. У меня три уровня у вас два, возможно в этом моя проблема. То есть у меня сразу идет main-cube контейнер для куба, потом .cube это уже непосредственно сам куб(pos relation) и side1 side2 и так далее(pos absolute) это сами стороны. Ида, вопрос а куда исчезает активная сторона. Я в codepen делал ваш вариант и при повороте активная сторона увеличивается и улетает в непонятные дали:) 5 мар 2017 в 12:19

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.