Question

我的有角项目中有一个flex div，我将它动态地放入div中作为按钮，这些按钮也是flex项。

每当我单击其中之一时，其他人就会消失，其余的人会居中。我的问题是我只能通过添加display: none;属性来做到这一点，否则即使通过添加类将其宽度设置为0，flex display仍会为其分配空间。

我的目标是使他们动画化，而不是直接捕捉到中心

容器CSS：

.container {
  width: 100%;
  height: 25%;
  display: flex;
  flex-flow: column wrap;
}

sbutton {
  width: auto;
  display: block;
  height: 100%;
}

.button-separator {
  border-style: solid;
  border-width: 0px;
  border-color: lightcyan;
  border-right-width: 1px;
}

.button-hide {
  width: 0;
  display: none;
}

容器HTML

<div class="container" *ngIf="buttonarray.length > 0">
    <sbutton *ngFor="let button of buttonarray"></sbutton>
</div>

按钮组件CSS：

.button-root {
    width: 100%;
    height: 100%;
    display: flex;
    margin: auto;
    cursor: pointer;
}

.buttoncontent {
    display: flex;
    margin: auto;
    user-select: none;
}
...

按钮组件HTML

<div class="button-root">
    <div class="buttoncontent">
        ...
    </div>
</div>

还，是的，我不知道我现在在做什么

Answer 1

不确定动画的渲染，但是您可以用这种方式（单击白点进行动画处理）：

const hideOtherButtons = (allButtons, clickedButton) => {
    allButtons.forEach((Button) => {
        if(Button != clickedButton)
            Button.closest('.Button-Container').classList.add('is-hidden');
    })
}

const reset = (allButtons) => {
    allButtons.forEach((Button) => {
        Button.closest('.Button-Container').classList.remove('is-hidden');
    })
}


const Buttons = document.querySelectorAll('.Button');
Buttons.forEach((Button) => {
    Button.addEventListener('click', (e) => hideOtherButtons(Buttons, e.currentTarget));
});

const ResetButton = document.querySelector('.Reset');
ResetButton.addEventListener('click', () => reset(Buttons));

.ButtonGroup {
    display: flex;
    background : #3f55af;
    border-top : solid 1px lightcyan;
}


.Button-Container {
    display: flex;
    justify-content: center;
    align-items: center;
    transition: .5s ease;
    flex-grow: 1
}

.Button-Container:not(:last-child) {
    border-right : solid 1px lightcyan;
}

/* State of component */
.Button-Container.is-hidden {
    width : 0;
    padding : 0;
    overflow: hidden;
    flex-grow: 0
}


.Button {
    display: flex;
    justify-content: center;
    align-items: center;
    border : none;
    outline : none;
    background : 0 0;
    padding : 0;
    margin : 0;
    width : 35px;
    height : 35px;
    cursor: pointer;
}


.Icon {
    width : 15px;
    height : 15px;
    border-radius: 15px;
    background : #fff;
}

<div class="ButtonGroup">
    <div class="Button-Container">
        <button class="Button">
            <i class="Icon"></i>
        </button>
    </div>
    <div class="Button-Container">
        <button class="Button">
            <i class="Icon"></i>
        </button>
    </div>
    <div class="Button-Container">
        <button class="Button">
            <i class="Icon"></i>
        </button>
    </div>
</div>

<button class="Reset">Reset</button>

对齐和动画化弹性项目

1 个答案: