Форум

zava75 · #1 (**permalink**) 13.10.2019, 13:44

Добрый день. Как можно оптимизировать скрипт
https://codepen.io/zava75/pen/LYPmbxL
на es2015 (Оператор разворота (spread operator) и тд)
Спасибо.

рони · #2 (**permalink**) 13.10.2019, 15:22

zava75,
~~[...t.querySelectorAll('div')].forEach~~

t.querySelectorAll('div').forEach

zava75 · #3 (**permalink**) 13.10.2019, 17:35

babbel cod es2015

document.addEventListener('DOMContentLoaded', ready);

function rand(x) {
  return Math.random() * x - x * 0.5 + 'px';
}

function ready() {
  var sections = document.querySelectorAll('div .section');

  for (var i = 0; i < sections.length; ++i) {
    var box = sections[i].querySelector('.text');
    if (box) {
      (function() {
        var hideText = function hideText(intel) {
          var t = intel.querySelector('.text');
          []
            .concat(_toConsumableArray(t.querySelectorAll('div')))
            .forEach(function(n, i) {
              Object.assign(n.style, {
                opacity: 0,
                transform:
                  'translate3d(' +
                  rand(400) +
                  ', ' +
                  rand(400) +
                  ', ' +
                  rand(60) +
                  ')'
              });
            });
        };

        var showText = function showText(intel) {
          var t = intel.querySelector('.text');
          console.log(t);

          []
            .concat(_toConsumableArray(t.querySelectorAll('div')))
            .forEach(function(n, i) {
              Object.assign(n.style, {
                opacity: 1,
                transform: 'translate3d(0, 0, 0)'
              });
            });
        };

        box.innerHTML = []
          .concat(_toConsumableArray(box.textContent))
          .map(function(n) {
            return '<div>' + (n.trim() ? n : '&nbsp;') + '</div>';
          })
          .join('');

        hideText(sections[i]);

        sections[i].addEventListener('mouseenter', function(e) {
          showText(this);
        });

        sections[i].addEventListener('mouseleave', function(e) {
          hideText(this);
        });
      })();
    }
  }
}

вот проблемный участок

(function() {
        var hideText = function hideText(intel) {
          var t = intel.querySelector('.text');
          []
            .concat(_toConsumableArray(t.querySelectorAll('div')))
            .forEach(function(n, i) {
              Object.assign(n.style, {
                opacity: 0,
                transform:
                  'translate3d(' +
                  rand(400) +
                  ', ' +
                  rand(400) +
                  ', ' +
                  rand(60) +
                  ')'
              });
            });
        };

рони · #4 (**permalink**) 13.10.2019, 18:14

zava75,
поставить Полифилл для Object.assign или убрать анимацию opacity в css.

рони · #5 (**permalink**) 14.10.2019, 08:44

zava75,
в чём задача, сделать код быстрее или для ie?

zava75 · #6 (**permalink**) 14.10.2019, 09:55

Сообщение от рони

zava75,
в чём задача, сделать код быстрее или для ie?

Добрый день, основная задача поддержка браузеров. Переделаю выложу если получится)

рони · #7 (**permalink**) 14.10.2019, 10:03

zava75,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
body, section {
	height: 100%;
    background: red;
	color: #fff;
}
.box {
  max-width: 50vw;
  padding: 30px;
  position: relative;
  font-size: 30px;
  line-height: 1.5;
  perspective: 400px;
}
div.text {
     display: flex;
     flex-wrap: wrap;
}

div.text > div.anime > span{
  transition: all 1.6s cubic-bezier(0.165, 0.84, 0.44, 1);
  opacity: 0;

}
.section:hover div.text > div.anime > span{
  opacity: 1;
}
.section{
    border: 1px #0000FF solid;
    width: 98%;
    margin: 0 auto;
    overflow: hidden;
}
.section div.text > div{
     display: flex;
}


  </style>
  <script src="https://unpkg.com/grapheme-splitter@1.0.4/index.js"></script>
  <script>
document.addEventListener('DOMContentLoaded', ready);

function rand(x) {
    return x * (Math.random() - 0.5) + 'px';
}
if (window.NodeList && !NodeList.prototype.forEach) {
    NodeList.prototype.forEach = Array.prototype.forEach;
}

function animateText(elems, random) {
    elems.forEach(function(n, i) {
        n.style.transform = random ? 'translate3d(' + [400, 400, 60].map(rand) + ')' :
            'translate3d(0, 0, 0)';
        n.style.transitionDelay =  Math.random() < 0.5 ? (700 + Math.random() * 1200) + 'ms' : '';
    });
}

function ready() {
    var sections = document.querySelectorAll('div .section');
    var splitter = new GraphemeSplitter();
    sections.forEach(function(section) {
        var box = section.querySelector('.text');
        if (box) {
            var teg = true;
            box.innerHTML = splitter.splitGraphemes(box.innerHTML).map(function(g) {
                g = g.trim();
                var html = '';
                if (g && teg) {
                    teg = false;
                    html = '<div class="anime">'
                } else if (!g && !teg) {
                    teg = true;
                    html = '</div>'
                };
                return html + '<span>' + (g ? g : '&nbsp;') + '</span>'
            }).join('');

            var spans = section.querySelectorAll('.anime > span');

            animateText(spans, true)

            section.addEventListener('mouseenter', function(e) {
                animateText(spans);
            });

            section.addEventListener('mouseleave', function(e) {
                animateText(spans, true)
            });
        }
    })
}
  </script>
</head>

<body>
<div>
<div class="section">
  <div class="box">
     <div class="text">&#128514; 안녕하세요  1 Animation is the process of creating the illusion of motion and shape change by means of the rapid display of a sequence of static images that minimally differ from each other. The illusion—as in motion pictures in general—is thought to rely on the &#128578;</div>
  </div>
</div>
</div>

</body>
</html>

Форум

Справочник

Discord чат

Курсы javascript