Блог

Главная - Вопросы по программированию - Выравнивание и анимация гибких элементов

Выравнивание и анимация гибких элементов

#html #css #angular #css-transitions

#HTML #css #угловой #css-переходы

Вопрос:

В моем проекте angular у меня есть гибкий div, в который я динамически помещаю divs в виде кнопок, которые также являются гибкими элементами.

Рисунок коробки

Всякий раз, когда я нажимаю на один из них, другие исчезают, а оставшийся центрируется. Моя проблема в том, что я могу сделать это, только добавив display: none; свойство, иначе flex display по-прежнему выделяет им пространство, даже если их ширина была установлена на 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>

Кроме того, да, я понятия не имею, что я делаю на данный момент

Ответ №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>