Проблема CSS Flex с Javascript, element.style.display = "none" в цикле for - PullRequest
0 голосов
/ 20 мая 2018

У меня объявлен массив:

var listChoices = [
    {nom: "Moi"},
    {nom: "Experiences"},
    {nom: "Savoir-Faires"}
];

Я хочу отобразить эти варианты на странице html / css в X-окнах в середине экрана, которые будут взаимодействовать при взаимодействии посетителей (чаще всего щелкает).

Так что я в основном использую Javascript для создания объекта

var Choice = {}

со всеми свойствами CSS, которые я хочу отображать для этих 3 вариантов (я использую массив, так что если я когда-либо захочудобавить другое поле, я просто должен добавить его в массив, и вся страница настраивается сама).

Важно, я также сделал:

document.body.style.display = "flex";
document.body.style.justifyContent = "space-around";

Моя проблема:

Я использую цикл for для создания трех объектов Choice на основе listChoices, например:

for(var i = 0; i < listChoices.length; i += 1) {
    var choice = object.create(Choice);
    choice.style();
    choice.init();
    choice.logs();
    choice.react();
}

Я в основном поместил свойства CSS, которые я сначала написал в Choice.style, во вновь созданные 3 объекта выбора.Затем я создаю 3 и размещаю их с помощью Choice.init.Затем Choice.react используется для того, чтобы использовать функции, которые я написал для fade, moveDown и moveCenter для трех элементов.

Моя проблема заключается в том, что когда я хочу, чтобы целевой элемент типа «click» оставался, а другой - исчезал,Я бы предпочел использовать:

element.style.display = "none";

Вместо чего-то вроде:

element.style.background = "transparent"; or element.style.background = "inherit";

вещь с дисплеем = "none";в том, что оставшийся элемент действует странно.Он закрывается вправо и влево в кадре или двух и заканчивается в середине после того, как два других элемента исчезли.

Итак, я хочу знать, моя проблема связана с циклом for?

Есть ли способ исправить положение трех элементов и сохранить это положение даже после удаления других элементов, связанных с изгибом?

1 Ответ

0 голосов
/ 20 мая 2018

Flex рассчитает положение и расположение элементов на основе видимого содержимого, с которым он должен работать, поэтому вы замечаете, что при использовании display: none; на некоторых элементах все становится странным.

Вы могли бы применить некоторые умные поля на основе nth-child, чтобы позволить вам использовать отображение: ни один, однако, в этот момент вы упустите преимущества Flexbox.

Если бы это былоя бы визуально скрыл элементы вместо использования свойства display.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...