• Как сделать развертывание аккордеона плавным?

    victormayorov
    @victormayorov
    Frontend разработчик
    С помощью max-height и transition. Для корректной анимации нужно перед установкой panel-close узнать изначальную высоту через js установить maxHeight
    Ответ написан
    6 комментариев
  • Как сделать развертывание аккордеона плавным?

    @Azperin
    Дилетант
    Можно гриды попробовать https://youtu.be/B_n4YONte5A?si=9r_06AFYgXvLqdMH&t=122
    Ответ написан
    Комментировать
  • Как сделать развертывание аккордеона плавным?

    GeorgeTudosi
    @GeorgeTudosi
    Технический директор, кинематографист, яхтсмен
    Я бы рекомендовал вовсе не использовать аккордеоны — это ад с точки зрения пользователя. Лучшее решение — длинный документ с прокруткой и оглавление со ссылками на разделы. На широких экранах оглавление удобно размещать сбоку, на узких (например, на мобильных) решать как-то иначе — например, с гамбургером. Не слишком элегантная конструкция, но лучше исходной.

    Если же аккордеон почему-то необходим, возьмите старый добрый jQuery и slideUp(), slideDown(), slideToggle() в зависимости от требуемого поведения. Можно и вручную написать, но с библиотекой проще и совместимость лучше.
    Ответ написан
    2 комментария
  • Dialog radix-ui не реагирует на нажатие кнопки закрытия в хедере, пока на нем висит position fixed, почему?

    @Daishinkan
    Указанный код работает без ошибок. Бургер меню открывается и закрывается без проблем
    Ответ написан
    Комментировать
  • Как мне исправить анимацию?

    sergey155
    @sergey155
    *,
        *::before,
        *::after {
          box-sizing: border-box;
        }
    
        .visually-hidden {
          position: absolute;
          width: 1px;
          height: 1px;
          margin: -1px;
          border: 0;
          padding: 0;
          white-space: nowrap;
          clip-path: inset(100%);
          clip: rect(0 0 0 0);
          overflow: hidden;
        }
    
        .wrapper {
          width: fit-content;
          padding: 50px;
          margin: 20px auto;
          outline: 2px dashed tomato;
          display: flex;
          align-items: center;
          justify-content: center;
        }
    
        .check-label {
          position: relative;
          display: inline-block;
          width: 50px;
          height: 20px;
          background-color: lightgrey;
          border: 1px solid grey;
          border-radius: 10px;
          box-shadow: 1px -2px 3px 2px rgba(0, 0, 0, 0.2) inset;
          background: linear-gradient(to right, blue, navy);
          background-repeat: no-repeat;
          background-size: 80%;
          background-position: -50px;
          transition: background-position 0.2s ease;
        }
    
        .check-label::before {
          content: "";
          display: inline-block;
          position: absolute;
          width: 23px;
          height: 23px;
          top: 50%;
          transform: translateY(-50%);
          left: 0;
          background-color: gainsboro;
          border: 5px solid dimgrey;
          border-radius: 50%;
          transition: left 0.25s ease;
        }
    
        #check:checked ~ .check-label {
          background-position: left;
        }
    
        #check:checked ~ .check-label::before {
          left: 27px;
        }
    Ответ написан
    Комментировать
  • Как можно быстро подключить шрифты в css?

    @holllop
    Так давай по полкам всё. Я конечно сомневаюсь, что подобного вопроса не было, но всё же
    1. Локальное хранение шрифтов: Вы можете скачать шрифт в нужном формате (например, WOFF или TTF) и сохранить его в своем проекте. Затем в CSS вы можете использовать правило @font-face, чтобы подключить шрифт, указывая путь к файлу на вашем сервере. Например:

    @font-face {
      font-family: 'MyFont';
      src: url('/path/to/font.woff2') format('woff2'),//пример пути
           url('/path/to/font.woff') format('woff');//пример пути
    }

    2.Есть вариант автоматизации этих процессов. Для этого используйте инструментов сборки и управления зависимостями(например GULP или WEBPACK)
    3.Есть ещё возможность. Внедрение шрифтов через сервисы веб-шрифтов: Некоторые сервисы веб-шрифтов, такие как Google Fonts или Adobe Fonts, предоставляют быстрый и простой способ подключения шрифтов на вашем сайте, предоставляя вам готовый код CSS для вставки на ваш сайт.
    Ответ написан
    4 комментария
  • Нужно сгенерировать массив объектов и дать каждому уникальный id, как?

    yarkov
    @yarkov Куратор тега JavaScript
    Помог ответ? Отметь решением.
    Array
      .from({ length: 25 })
      .map((item, index) => ({ id: index + 1 }));
    
    /** 
     * [
     *   {
     *       "id": 1
     *   },
     *   ...
     *   {
     *        "id": 25
     *    }
     * ] 
     */
    Ответ написан
    2 комментария
  • Нужно сгенерировать массив объектов и дать каждому уникальный id, как?

    @Paul14
    Конструктор не знает о номере экземпляра объекта, так как уникальные идентификаторы обычно генерируются и присваиваются во время создания объекта. Однако вы можете использовать класс для создания объектов с уникальными идентификаторами. Вот пример кода, который генерирует массив объектов, каждый из которых содержит уникальный идентификатор:

    class MyObject {
      constructor(id, otherProperty) {
        this.id = id;
        this.otherProperty = otherProperty;
      }
    }
    
    function generateObjectsArray() {
      const objectsArray = [];
    
      for (let i = 1; i <= 25; i++) {
        const objectId = i; // Уникальный идентификатор объекта
        const otherProperty = "Другое свойство " + i; // Другое свойство объекта
    
        const newObj = new MyObject(objectId, otherProperty);
        objectsArray.push(newObj);
      }
    
      return objectsArray;
    }
    
    const myArray = generateObjectsArray();
    console.log(myArray);


    Здесь класс MyObject определяет объекты с двумя свойствами: id и otherProperty. В функции generateObjectsArray() мы создаем массив из 25 объектов, где каждый объект имеет уникальный идентификатор от 1 до 25. Вы можете заменить otherProperty на любое другое свойство или добавить сколько угодно свойств по своему усмотрению.

    Переменная myArray будет содержать сгенерированный массив объектов с уникальными идентификаторами.

    ---------------------------

    Если же вам все таки нужен пример функции для решения этой нетривиальной задачи, то:

    const objectsArray = Array.from({ length: 25 })
      .map((_, index) => index + 1)
      .map(id => {
        const sum = [...Array(Math.floor(Math.random() * 10) + 1)].reduce((acc, _) => acc + Math.floor(Math.random() * 100) + 1, id);
        let emoji = '';
        if (sum % 2 === 0) {
          const emojis = ['', '', '', '', ''];
          emoji = emojis[Math.floor(Math.random() * emojis.length)];
        } else {
          const emojis = ['', '', '', '', ''];
          emoji = emojis[Math.floor(Math.random() * emojis.length)];
        }
        
        return { id, sum, emoji };
      });
    
    console.log(objectsArray);

    1. Сначала мы снова используем метод Array.from() для создания массива из 25 элементов, но без передачи функции обратного вызова.
    2. Затем мы используем метод map() для преобразования индекса элемента в уникальный идентификатор id.
    3. Далее мы снова используем метод map(), чтобы каждый объект массива получил дополнительные свойства sum и emoji.
    4. Чтобы вычислить значение sum, мы создаем новый массив с случайной длиной от 1 до 10 элементов с помощью Array(Math.floor(Math.random() * 10) + 1), затем с помощью метода reduce() суммируем случайные числа от 1 до 100.
    5. Затем выбирается случайное эмодзи из массива эмодзи в зависимости от четности значения sum.
    6. Наконец, мы возвращаем объект с id, sum и emoji в каждой итерации.
    7. Полученный массив объектов objectsArray будет содержать 25 объектов, каждый из которых будет иметь уникальный идентификатор id, случайно сгенерированную сумму sum, а также случайно выбранное эмодзи emoji.


    PS: если emoji не нужно, то можно удалить часть кода.
    Ответ написан
    1 комментарий