对齐和动画弹性项目答案

【问题标题】：Aligning and animating flex items对齐和动画弹性项目
【发布时间】：2020-12-20 13:58:08
【问题描述】：

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

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

我的目标是让它们居中而不是直接对齐到中心

容器 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>

另外，是的，我现在不知道自己在做什么

【问题讨论】：

标签： html css angular css-transitions

【解决方案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>

【讨论】：