对齐和动画弹性项目

Question

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

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

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

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

对齐和动画弹性项目

Aligning and animating flex items

html

css

css-transitions

angular