如何平稳地移动相对位置的divs提交其他Divs的差距

Question

我正在使用Hexagons进行交互式菜单。当用户单击其中一个六边形时，另一个六角形应该消失，一个单击接收到类selected，并在div的左上方突出显示

问题是动画非常糟糕且突然，部分原因是他的方式消失了。

在这种情况下，如何平滑地对选定DIV的位置的更改进行动画？

编辑

这是动画的链接，https://codepen.io/sobrancelhas/pen/mboggg

前三个元素移动平稳。

Answer 1

如果您的问题是所有的六角形都会消失，而您不想要这个，那么添加另一个类以过滤必须受动画影响的div。

<div class='hexagon moving'></div>

并在divs上执行动画。

$(".moving").not(this).animate(...

Answer 2

1. 需要html，所以我猜。
2. 需要CSS，所以我猜。
3. 正如 @fredomn-M已经提到的，CSS过渡是简单动画的JavaScript的更好替代方法，因此我在.seleted和.popen类上添加了过渡。

摘要

$('.hexagonTile').click(function(e) {
  e.preventDefault();
  $(this).find('.circle').toggleClass('open');
  var items = $(this).find('.circle a');
  for (var i = 0, l = items.length; i < l; i++) {
    items[i].style.left = (50 - 35 * Math.cos(-0.5 * Math.PI - 2 * (1 / l) * i * Math.PI)).toFixed(4) + "%";
    items[i].style.top = (50 + 35 * Math.sin(-0.5 * Math.PI - 2 * (1 / l) * i * Math.PI)).toFixed(4) + "%";
  }
  if ($(this).hasClass('selected')) {
    $(this).removeClass('selected', 1000);
    $(".hexagonTile").not(this).animate({
      'height': 'show',
      'width': 'show',
      'opacity': 'show'
    }, 1000);
  } else {
    $(this).addClass('selected', 1000);
    $(".hexagonTile").not(this).animate({
      'height': 'hide',
      'opacity': 'hide',
      'width': 'hide'
    }, 1000);
  }
});

.flex {
  display: flex;
  position: relative;
}
section:nth-of-type(even) {
  left: 29px;
  top: -16px;
}
.circle {
  border-radius: 50%;
  background: #0ff;
  text-align: center;
  width: 40px;
  height: 40px;
  position: absolute;
  top: -5px;
  left: 7px;
  z-index: 2;
  visibility: hidden;
}
.hexagonTile {
  position: relative;
  width: 55px;
  height: 31.75px;
  background-color: #0f0;
  margin: 15.88px 0;
  border-left: solid 1px #ff0000;
  border-right: solid 1px #ff0000;
}
.hexagonTile:before,
.hexagonTile:after {
  content: "";
  position: absolute;
  z-index: 1;
  width: 38.89px;
  height: 38.89px;
  -webkit-transform: scaleY(0.5774) rotate(-45deg);
  -ms-transform: scaleY(0.5774) rotate(-45deg);
  transform: scaleY(0.5774) rotate(-45deg);
  background-color: inherit;
  left: 7.0546px;
}
.hexagonTile:before {
  top: -19.4454px;
  border-top: solid 1.4142px #ff0000;
  border-right: solid 1.4142px #ff0000;
}
.hexagonTile:after {
  bottom: -19.4454px;
  border-bottom: solid 1.4142px #ff0000;
  border-left: solid 1.4142px #ff0000;
}
.selected {
  visibility: hidden;
  height: 0;
  width: 0;
  transition: all 1s ease-in;
}
.open {
  visibility: visible;
  height: 40px;
  width: 40px;
  transition: all 1s ease-in;
  top: 0;
  left: 0;
  position: relative;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class='flex'>
  <div class='hexagonTile'>
    <div class='circle'><a href='#/'>A</a>
    </div>
  </div>
  <div class='hexagonTile'>
    <div class='circle'><a href='#/'>B</a>
    </div>
  </div>
  <div class='hexagonTile'>
    <div class='circle'><a href='#/'>C</a>
    </div>
  </div>
  <div class='hexagonTile'>
    <div class='circle'><a href='#/'>D</a>
    </div>
  </div>
  <div class='hexagonTile'>
    <div class='circle'><a href='#/'>E</a>
    </div>
  </div>
  <div class='hexagonTile'>
    <div class='circle'><a href='#/'>F</a>
    </div>
  </div>
  <div class='hexagonTile'>
    <div class='circle'><a href='#/'>G</a>
    </div>
  </div>
  <div class='hexagonTile'>
    <div class='circle'><a href='#/'>H</a>
    </div>
  </div>
</section>
<section class='flex'>
  <div class='hexagonTile'>
    <div class='circle'><a href='#/'>A</a>
    </div>
  </div>
  <div class='hexagonTile'>
    <div class='circle'><a href='#/'>B</a>
    </div>
  </div>
  <div class='hexagonTile'>
    <div class='circle'><a href='#/'>C</a>
    </div>
  </div>
  <div class='hexagonTile'>
    <div class='circle'><a href='#/'>D</a>
    </div>
  </div>
  <div class='hexagonTile'>
    <div class='circle'><a href='#/'>E</a>
    </div>
  </div>
  <div class='hexagonTile'>
    <div class='circle'><a href='#/'>F</a>
    </div>
  </div>
  <div class='hexagonTile'>
    <div class='circle'><a href='#/'>G</a>
    </div>
  </div>
  <div class='hexagonTile'>
    <div class='circle'><a href='#/'>H</a>
    </div>
  </div>
</section>