api?username=torinasakura
  • Отец
  • Трудоголик
  • Композитор (Epoch Crysis | Torin Asakura)
  • Инженер
  • Металлист
  • Гик
Контакты
Местоположение
Россия, Москва и Московская обл., Электросталь

Достижения

Все достижения (3)

Наибольший вклад в теги

Все теги (41)

Лучшие ответы пользователя

Все ответы (101)
  • Как сделать такой эффект?

    Torin_Asakura
    @Torin_Asakura
    Lead Architect
    В вашем примере речь идёт о простом expandBlock с использованием директивы transition.
    Фишка в том, что текст изначально подгружен и живёт в доме, "слушать" изменения дом-ноды в данном случае нет необходимости и что-то грузить после инициализации объекта.
    Нужно просто:
    - подгружать объекты в дом
    - дождаться коллапс/экспанд
    - отдать уже подгруженный контент
    Vue.directive('expand', {
        inserted: function(el, binding)
        {
            if (binding.value !== null)
            {
                function calcHeight()
                {
                    const currentState = el.getAttribute('aria-expanded')
    
                    el.classList.add('u-no-transition')
                    el.removeAttribute('aria-expanded')
                    el.style.height = null
                    el.style.height = el.clientHeight + 'px'
                    el.setAttribute('aria-expanded', currentState)
    
                    setTimeout(function()
                    {
                        el.classList.remove('u-no-transition')
                    })
                }
    
                el.classList.add('expand')
                el.setAttribute('aria-expanded', (binding.value) ? 'true' : 'false')
                calcHeight()
                window.addEventListener('resize', calcHeight)
            }
        },
        update: function(el, binding)
        {
            if (el.style.height && binding.value !== null)
            {
                el.setAttribute('aria-expanded', (binding.value) ? 'true' : 'false')
            }
        },
    })
    
    var app = new Vue({
        el: '#app',
        data: {
            isExpanded: false
        }
    })
    Ответ написан
    3 комментария
  • Меню для мобильной версии сайта?

    Torin_Asakura
    @Torin_Asakura
    Lead Architect
    "Может быть есть подводные камни"…друг, ты вроде пришел в мир разработки и технологий, ты ничему не научишься пока будешь также лениться и ждать ответов и резолвов, и твой пост больше подходит для freelansim.ru
    Ответ написан
    5 комментариев
  • Как обрезать изображения на css?

    Torin_Asakura
    @Torin_Asakura
    Lead Architect
    https://www.viget.com/articles/angled-edges-with-c... - то, что ты хотел, во всевозможных вариациях
    Ответ написан
    Комментировать
  • Как правильно произносить эти слова?

    Torin_Asakura
    @Torin_Asakura
    Lead Architect
    Правильно:
    CSS - Си-Эс-Эс
    PHP - Пи-Эйч-Пи
    JavaScript - ДжаваСкрипт - https://translate.google.ru/#en/ru/javascript
    Gulp - Галп
    Webpack - ВебПак
    Произношение можно проверить в том же https://translate.google.ru/#en/ru/

    На Слэнге:
    CSS - ЦСС
    PHP - Пыха, ПХП
    JavaScript - JS
    Gulp - гульп
    Webpack - так и есть
    Ответ написан
    Комментировать
  • Как настраивать robots и sitemap в react?

    Torin_Asakura
    @Torin_Asakura
    Lead Architect
    Привет. Вариантов в принципе не много, вернее вариантов много, но, нормальных 1-2, приведу их ниже:
    Ты можешь использовать react-helmet.
    Например:
    import React       from 'react'
    import Helmet      from 'react-helmet'
    import { useIntl } from 'react-intl'
    
    import messages    from './messages'
    
    export const Seo = () => {
      const intl = useIntl()
    
      const title = intl.formatMessage(messages.title)
      const description = intl.formatMessage(messages.description)
    
      return (
        <Helmet
          htmlAttributes={{ lang: intl.locale }}
          title={title}
          titleTemplate={`%s | ${title}`}
          meta={[
            {
              name: 'description',
              content: description,
            },
            {
              property: 'og:title',
              content: title,
            },
            {
              property: 'og:description',
              content: description,
            },
            {
              property: 'og:type',
              content: 'website',
            },
            {
              name: 'twitter:card',
              content: 'summary',
            },
            {
              name: 'twitter:title',
              content: title,
            },
            {
              name: 'twitter:description',
              content: description,
            },
          ]}
        />
      )
    }

    Для sitemap можешь использовать react-router-sitemap
    import { Router, Route, IndexRoute, Redirect, IndexRedirect } from 'react-router'
    import React from 'react';
    
    export default (
        <Router>
            <Route path="/">
                <IndexRoute/>
                <Route path="test" />
                <Route path="posts(/:page)" />
                <Route path="article/:hrefTitle" />
                <Route path="tags/:tagName" />
                <Route path="tags/pages/(:page)" />
                <Route path="archive(/:searchKey)" />
                <Redirect path="*" to="/" />
            </Route>
        </Router>
    )
    Ответ написан
    Комментировать

Лучшие вопросы пользователя

Все вопросы (4)