Question

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

问题在于动画是非常糟糕和突然的，部分是因为其他div消失的方式。

在这种情况下如何平滑地动画所选div的位置变化？

修改

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

前三个元素顺利进行。

Answer 1

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

addViewTransformer

使用类.moving在div上执行动画。

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

Answer 2

需要HTML，所以我猜到了。
需要CSS，所以我猜对了。
正如@ fredomn-m已经提到的，对于简单动画，CSS转换是JavaScript的更好替代方法，所以我在.selected和.open类上添加了转换。

段

Sub test()
    Dim r As Range
    Dim FindRange As Range
    Dim FirstFound As String
    Dim ws As Worksheet
    Dim arrRng(4, 2) As Integer, i As Integer

    Set ws = ThisWorkbook.Worksheets("yourWorkSheet")

    Set FindRange = ws.Cells.Find(What:="Operator Name", _
            After:=ws.Cells(1, 1), _
            LookIn:=xlValues, _
            LookAt:=xlPart, _
            SearchOrder:=xlByRows, _
            SearchDirection:=xlNext, _
            MatchCase:=False, _
            SearchFormat:=False)
        If Not FindRange Is Nothing Then
            FirstFound = FindRange.Address
            i = 1
            Do
                arrRng(i, 1) = FindRange.Row
                arrRng(i, 2) = FindRange.Column
                ' find next instance
                Set FindRange = ws.Cells.FindNext(After:=FindRange)
                i = i + 1
                Loop Until FirstFound = FindRange.Address
        End If

End Sub

$('.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;
}

如何平滑移动相对定位的divs填补其他div的空白

2 个答案:

段