Question

这是一个使用相对定位的六边形的菜单。当我点击其中一个六边形时，其他六边形应该消失，单击的那个六边形接收所选的类，并在div的左上角突出显示。

动画是突然的，部分是因为其他div消失的方式。

在这种情况下如何平滑地动画所选div的位置变化？这里是动画的链接（注意：前三个元素顺利移动）。

https://codepen.io/sobrancelhas/pen/MbOggV

$(document).ready(function() {          
    $('.hexagonTile').click(function(e) {

        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) + "%";
        }

        e.preventDefault(); $(this).find('.circle').toggleClass('open');

        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);

        }
    });
});

Answer 1

请假设您点击了中间行的六边形（左上角的第7个六边形）。

所有六边形的宽度但开始从200减少到199到198 ......

当它们的宽度变为140px时，第一行具有 5 六边形不透明度，因此您的第5 六边形（第2行左侧）跳到第一行！

之后的所有六边形都跳了140px。这个跳跃重复几次宽度减少，导致我们感觉移动不顺畅。

所以你必须使用绝对定位使六边形变得彼此独立。

如何平滑地动画相对定位的div填补其他div留下的空白？

1 个答案: