Panel fleksibel di CSS dan JS

Oct 31 2020

Saya mengikuti tantangan 30 hari Wes Bos JS, jadi HTML dan CSS sebagian besar adalah salin-tempel, saya ingin umpan balik tentang JS (kebanyakan). Terima kasih.

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>

Jawaban

7 CertainPerformance Oct 31 2020 at 22:02

Ini terlihat cukup bagus untuk saya. Saya hanya dapat melihat beberapa hal untuk dipertimbangkan:

Pemeriksaan propertyName yang lebih tepat Anda miliki if(e.propertyName.includes('flex')) {karena Safari menggunakan flexdan orang lain menggunakan flex-grow. Anda yakin bahwa flexsubstring tidak akan ada dalam kemungkinan transisi CSS lainnya? Bahkan jika Anda yakin, apakah pembaca kode akan yakin? Saya akan beralih ke ===tes terhadap kedua kemungkinan, atau setidaknya menggunakan startsWith(yang sedikit lebih tepat daripada di .includessini, karena kedua kemungkinan dimulai dengan flex).

Anda juga dapat memindahkan komentar tentang nama acara transisi ke JS serta CSS.

Concise classList setting Saat Anda ingin menambahkan nama kelas, atau menghapus nama kelas, berdasarkan kondisi, Anda dapat menyingkat if(...) classList.add(...) else(...) classList.removemenjadi satu classList.toggledengan argumen kedua yang menunjukkan apakah akan menambah atau menghapus kelas. Anda

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

disederhanakan menjadi

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

Kompatibilitas browser Meskipun, beberapa browser kuno tidak mendukung argumen ke-2, jadi pertimbangkan browser seperti apa yang perlu Anda dukung. Jika Anda hanya ingin mendukung browser yang cukup mutakhir, tidak masalah. Hal lain yang perlu diingat adalah bahwa NodeList.prototype.forEachbaru diperkenalkan beberapa tahun lalu, sekitar tahun 2016 atau 2017 IIRC; seperti startsWith, ini lebih baru dari ES6, jadi gunakan polyfill atau gunakan iterator dan Babel sebagai gantinya, misalnya:

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

(jika Anda ingin mendukung IE, Anda harus tetap menggunakan Babel, untuk memindahkan kode Anda ke sintaks ES5)

Batal kembali? panels.forEach(panel => panel.addEventListenermengembalikan nilai panggilan addEventListenerke pemanggil forEach. Karena forEachtidak melihat apa yang dikembalikan panggilan baliknya, ini tidak melakukan apa-apa. Ini bukan masalah nyata, tetapi beberapa mungkin menganggap kode tersebut lebih masuk akal jika forEachcallback mengembalikan void (tidak ada returnpernyataan atau pengembalian implisit sama sekali). (Dijelaskan dalam TSLint TypeScript di sini )

Panel yang dapat diklik Karena panel dapat diklik, mungkin mengubah dari kursor default cursor: pointeruntuk membuatnya lebih jelas bagi pengguna bahwa mereka dimaksudkan untuk diklik?

Ruang antara elemen dalam penyeleksi aku akan berubah .panel>*ke .panel > *- itu membuat sedikit lebih mudah untuk dibaca saat elemen yang terpisah dipisahkan oleh spasi.

Panel berulang daripada

<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);
}

Pertimbangkan untuk menggunakan :nth-childsebagai gantinya, memungkinkan Anda untuk menghapus seluruh panel#kelas tambahan .

.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

Ulasan

Saya setuju dengan jawaban dari SurePerformance: kodenya terlihat cukup bagus. Indentasi tampak konsisten, nama variabel sesuai, dan garis diakhiri dengan baik. Keterbacaan itu bagus.

Loop yang tidak efisien

Kode di event handler mengulang semua elemen panel, namun paling banyak hanya dua elemen yang akan memiliki update ke daftar kelasnya. Lihat saran di bawah tentang cara menghilangkan loop.

Aturan CSS berlebih

Gaya font-size: 20px;tidak diperlukan di bawah .panelkarena aturan yang sama juga ditentukan pada html, ditambah itu diganti oleh pemilih yang lebih spesifik.

Saran

Hapus loop dengan menggunakan delegasi acara

Alih-alih menambahkan event listener ke setiap elemen panel, event listener dapat ditambahkan ke elemen kontainer. Ini akan membutuhkan pengubahan event handler untuk melihat target event dan menentukan apakah target cocok dengan panel atau turunan dari panel - dapat dilakukan dengan .closest()metode ini. Dan koleksi HTMLCollection langsung dari elemen dengan nama kelas opendapat diambil sekali menggunakan document.getElementsByClassName('open');. Kemudian jika ada elemen yang memiliki kelas tersebut saat handler klik dipanggil, nama kelas dapat dihapus.

Ini akan memungkinkan penambahan dan penghapusan panel tanpa perlu mendaftarkan event handler pada mereka. Meskipun tidak membuat perbedaan yang mencolok pada halaman kecil seperti ini, sebaiknya pertimbangkan tempat-tempat di mana loop dapat dihindari.