Flex panele w CSS i JS

Oct 31 2020

Śledziłem 30-dniowe wyzwanie Wes Bos JS, więc HTML i CSS to przeważnie kopiuj-wklej, chciałbym poznać opinie na temat JS (głównie). Dzięki.

const panels = document.querySelectorAll('.panel');

panels.forEach(panel => panel.addEventListener('click', () => {
  const isOpen = panel.classList.contains('open');
  panels.forEach(panel => panel.classList.remove('open'));
  if(!isOpen) {
    panel.classList.add('open');
  }
}));

panels.forEach(panel => panel.addEventListener('transitionend', e => {
  if(e.propertyName.includes('flex')) {
    panels.forEach(panel => {
      if(panel.classList.contains('open')) {
        panel.classList.add('open-active');
      } else {
        panel.classList.remove('open-active');
      }
    });
  }
}));

html {
  box-sizing: border-box;
  background: #ffc600;
  font-family: 'helvetica neue';
  font-size: 20px;
  font-weight: 200;
}

body {
  margin: 0;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

.panels {
  min-height: 100vh;
  overflow: hidden;
  display: flex;
}

.panel {
  background: #6B0F9C;
  box-shadow: inset 0 0 0 5px rgba(255, 255, 255, 0.1);
  color: white;
  text-align: center;
  align-items: center;
  /* Safari transitionend event.propertyName === flex */
  /* Chrome + FF transitionend event.propertyName === flex-grow */
  transition:
    font-size 0.7s cubic-bezier(0.61, -0.19, 0.7, -0.11),
    flex 0.7s cubic-bezier(0.61, -0.19, 0.7, -0.11), background 0.2s;
  font-size: 20px;
  background-size: cover;
  background-position: center;

  flex: 1;
  display: flex;
  justify-content: center;
  flex-direction: column;
}

.panel1 {
  background-image: url(https://source.unsplash.com/gYl-UtwNg_I/1500x1500);
}

.panel2 {
  background-image: url(https://source.unsplash.com/rFKUFzjPYiQ/1500x1500);
}

.panel3 {
  background-image: url(https://images.unsplash.com/photo-1465188162913-8fb5709d6d57?ixlib=rb-0.3.5&q=80&fm=jpg&crop=faces&cs=tinysrgb&w=1500&h=1500&fit=crop&s=967e8a713a4e395260793fc8c802901d);
}

.panel4 {
  background-image: url(https://source.unsplash.com/ITjiVXcwVng/1500x1500);
}

.panel5 {
  background-image: url(https://source.unsplash.com/3MNzGlQM7qs/1500x1500);
}

/* Flex Children */
.panel>* {
  margin: 0;
  width: 100%;
  transition: transform 0.5s;
  flex: 1 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.panel *:first-child {
  transform: translateY(-100%);
}

.panel *:last-child {
  transform: translateY(100%);
}

.panel.open-active *:first-child,
.panel.open-active *:last-child {
  transform: translateY(0);
}

.panel p {
  text-transform: uppercase;
  font-family: 'Amatic SC', cursive;
  text-shadow: 0 0 4px rgba(0, 0, 0, 0.72), 0 0 14px rgba(0, 0, 0, 0.45);
  font-size: 2em;
}

.panel p:nth-child(2) {
  font-size: 4em;
}

.panel.open {
  font-size: 40px;
  flex: 5;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Flex Panels 💪</title>
  <link href="https://fonts.googleapis.com/css?family=Amatic+SC" rel="stylesheet" type="text/css">
</head>
<body>

  <div class="panels">
    <div class="panel panel1">
      <p>Hey</p>
      <p>Let's</p>
      <p>Dance</p>
    </div>
    <div class="panel panel2">
      <p>Give</p>
      <p>Take</p>
      <p>Receive</p>
    </div>
    <div class="panel panel3">
      <p>Experience</p>
      <p>It</p>
      <p>Today</p>
    </div>
    <div class="panel panel4">
      <p>Give</p>
      <p>All</p>
      <p>You can</p>
    </div>
    <div class="panel panel5">
      <p>Life</p>
      <p>In</p>
      <p>Motion</p>
    </div>
  </div>

</body>
</html>

Odpowiedzi

7 CertainPerformance Oct 31 2020 at 22:02

Jak dla mnie wygląda całkiem nieźle. Widzę tylko kilka rzeczy do rozważenia:

Bardziej precyzyjne sprawdzanie nazwy właściwości, które masz, if(e.propertyName.includes('flex')) {ponieważ używa Safari, flexa inni używają flex-grow. Czy jesteś pewien , że flexpodciąg nie będzie obecny w innych możliwych przejść CSS? Nawet jeśli jesteś pewien, czy czytelnicy kodu będą pewni? Zmieniłbym na ===test z obiema możliwościami lub przynajmniej użyj startsWith(co jest trochę bardziej odpowiednie niż .includestutaj, ponieważ obie możliwości zaczynają się od flex).

Możesz również przenieść komentarz dotyczący nazwy zdarzenia przejścia do JS oraz CSS.

Zwięzłe ustawienie classList Jeśli chcesz dodać nazwę klasy lub usunąć nazwę klasy na podstawie warunku, możesz skondensować ją if(...) classList.add(...) else(...) classList.removew jedną classList.togglez drugim argumentem, który wskazuje, czy dodać lub usunąć klasę. Twój

if(panel.classList.contains('open')) {
  panel.classList.add('open-active');
} else {
  panel.classList.remove('open-active');
}

upraszcza do

const { classList } = panel;
classList.toggle('open-active', classList.contains('open'));

Zgodność z przeglądarkami Chociaż niektóre starożytne przeglądarki nie obsługują drugiego argumentu, zastanów się, jakiego rodzaju przeglądarki potrzebujesz. Jeśli chcesz obsługiwać tylko aktualne przeglądarki, to jest w porządku. Kolejną rzeczą, o której należy pamiętać, jest to, że NodeList.prototype.forEachwprowadzono je dopiero kilka lat temu, około 2016 lub 2017 IIRC; na przykład startsWithjest nowszy niż ES6, więc użyj wypełnienia polyfill lub zamiast niego użyj iteratorów i Babel, np .:

for (const panel of panels) {
  // do stuff with panel

(jeśli chcesz obsługiwać IE, i tak powinieneś używać Babel, aby przetransponować kod do składni ES5)

Powrót Pustki? panels.forEach(panel => panel.addEventListenerzwraca wartość wywołania addEventListenerdo osoby dzwoniącej forEach. Ponieważ forEachnie patrzy na to, co zwracają wywołania zwrotne, to nic nie robi. To nie jest prawdziwy problem, ale niektórzy mogą uznać, że kod ma nieco więcej sensu, jeśli forEachwywołanie zwrotne zwróciło void (brak returninstrukcji lub w ogóle niejawny zwrot). (Opisane tutaj w TSLint TypeScript )

Klikalne panele Ponieważ panele są klikalne, może zmienić domyślny kursor cursor: pointerna, aby użytkownik był bardziej widoczny, że mają być klikane?

Przestrzeń między elementami selektorów bym zmieniają .panel>*się .panel > *- to sprawia, że jest nieco łatwiejsze do odczytania, gdy oddzielne elementy są oddzielone spacjami.

Raczej powtarzalne panele

<div class="panel panel1">
</div>
<div class="panel panel2">
</div>

.panel1 {
  background-image: url(https://source.unsplash.com/gYl-UtwNg_I/1500x1500);
}

.panel2 {
  background-image: url(https://source.unsplash.com/rFKUFzjPYiQ/1500x1500);
}

Rozważ użycie :nth-childzamiast tego, pozwalając panel#całkowicie usunąć dodatkowe klasy.

.panel:nth-child(1) {
  background-image: url(https://source.unsplash.com/gYl-UtwNg_I/1500x1500);
}

.panel:nth-child(2) {
  background-image: url(https://source.unsplash.com/rFKUFzjPYiQ/1500x1500);
}

const panels = document.querySelectorAll('.panel');

panels.forEach((panel) => {
  panel.addEventListener('click', () => {
    const isOpen = panel.classList.contains('open');
    panels.forEach(panel => panel.classList.remove('open'));
    if (!isOpen) {
      panel.classList.add('open');
    }
  });
});

panels.forEach((panel) => {
  panel.addEventListener('transitionend', e => {
    /* Safari transitionend event.propertyName === flex */
    /* Chrome + FF transitionend event.propertyName === flex-grow */
    if (e.propertyName === 'flex' || e.propertyName === 'flex-grow') {
      panels.forEach(panel => {
        const { classList } = panel;
        classList.toggle('open-active', classList.contains('open'));
      });
    }
  })
});

html {
  box-sizing: border-box;
  background: #ffc600;
  font-family: 'helvetica neue';
  font-size: 20px;
  font-weight: 200;
}

body {
  margin: 0;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

.panels {
  min-height: 100vh;
  overflow: hidden;
  display: flex;
}

.panel {
  background: #6B0F9C;
  box-shadow: inset 0 0 0 5px rgba(255, 255, 255, 0.1);
  color: white;
  text-align: center;
  align-items: center;
  /* Safari transitionend event.propertyName === flex */
  /* Chrome + FF transitionend event.propertyName === flex-grow */
  transition:
    font-size 0.7s cubic-bezier(0.61, -0.19, 0.7, -0.11),
    flex 0.7s cubic-bezier(0.61, -0.19, 0.7, -0.11), background 0.2s;
  font-size: 20px;
  background-size: cover;
  background-position: center;

  flex: 1;
  display: flex;
  justify-content: center;
  flex-direction: column;
  
  cursor: pointer;
}

.panel:nth-child(1) {
  background-image: url(https://source.unsplash.com/gYl-UtwNg_I/1500x1500);
}

.panel:nth-child(2) {
  background-image: url(https://source.unsplash.com/rFKUFzjPYiQ/1500x1500);
}

.panel:nth-child(3) {
  background-image: url(https://images.unsplash.com/photo-1465188162913-8fb5709d6d57?ixlib=rb-0.3.5&q=80&fm=jpg&crop=faces&cs=tinysrgb&w=1500&h=1500&fit=crop&s=967e8a713a4e395260793fc8c802901d);
}

.panel:nth-child(4) {
  background-image: url(https://source.unsplash.com/ITjiVXcwVng/1500x1500);
}

.panel:nth-child(5) {
  background-image: url(https://source.unsplash.com/3MNzGlQM7qs/1500x1500);
}

/* Flex Children */
.panel > * {
  margin: 0;
  width: 100%;
  transition: transform 0.5s;
  flex: 1 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.panel *:first-child {
  transform: translateY(-100%);
}

.panel *:last-child {
  transform: translateY(100%);
}

.panel.open-active *:first-child,
.panel.open-active *:last-child {
  transform: translateY(0);
}

.panel p {
  text-transform: uppercase;
  font-family: 'Amatic SC', cursive;
  text-shadow: 0 0 4px rgba(0, 0, 0, 0.72), 0 0 14px rgba(0, 0, 0, 0.45);
  font-size: 2em;
}

.panel p:nth-child(2) {
  font-size: 4em;
}

.panel.open {
  font-size: 40px;
  flex: 5;
}

<link href="https://fonts.googleapis.com/css?family=Amatic+SC" rel="stylesheet" type="text/css">
<div class="panels">
  <div class="panel">
    <p>Hey</p>
    <p>Let's</p>
    <p>Dance</p>
  </div>
  <div class="panel">
    <p>Give</p>
    <p>Take</p>
    <p>Receive</p>
  </div>
  <div class="panel">
    <p>Experience</p>
    <p>It</p>
    <p>Today</p>
  </div>
  <div class="panel">
    <p>Give</p>
    <p>All</p>
    <p>You can</p>
  </div>
  <div class="panel">
    <p>Life</p>
    <p>In</p>
    <p>Motion</p>
  </div>
</div>

4 SᴀᴍOnᴇᴌᴀ Nov 01 2020 at 05:50

Przejrzeć

Zgadzam się z odpowiedzią CertainPerformance: kod wygląda całkiem nieźle. Wcięcie wydaje się spójne, nazwy zmiennych są odpowiednie, a wiersze są dobrze zakończone. Czytelność jest świetna.

Nieskuteczne pętle

Kod w procedurach obsługi zdarzeń zapętla wszystkie elementy panelu, ale co najwyżej tylko dwa elementy miałyby zaktualizowane listy klas. Zobacz poniższą sugestię dotyczącą sposobów eliminacji pętli.

Nadmiar reguł CSS

Styl font-size: 20px;nie jest potrzebny w ramach, .panelponieważ ta sama reguła jest również określona w pozycji html, a ponadto jest zastępowana przez bardziej szczegółowe selektory.

Sugestia

Usuń pętle przy użyciu delegowania zdarzeń

Zamiast dodawać detektory zdarzeń do każdego elementu panelu, detektory zdarzeń można dodać do elementu kontenera. Wymagałoby to zmiany procedur obsługi zdarzeń, aby spojrzeć na cel zdarzenia i określenie, czy cel pasuje do panelu lub elementu podrzędnego panelu - można to zrobić za pomocą .closest()metody. A żywą kolekcję HTMLCollection elementów z nazwą klasy openmożna pobrać po użyciu document.getElementsByClassName('open');. Następnie, jeśli jakieś elementy mają tę klasę, gdy wywoływana jest funkcja obsługi kliknięcia, nazwa klasy może zostać usunięta.

Umożliwiłoby to dodawanie i usuwanie paneli bez konieczności rejestrowania w nich programów obsługi zdarzeń. Chociaż może to nie mieć zauważalnej różnicy na małej stronie, takiej jak ta, rozsądnie jest rozważyć miejsca, w których można uniknąć pętli.