Question

我正在尝试在导航栏中设置标题动画。就像这个网站上的那个：

http://www.danielspatzek.com/Home

我尝试的是为洞穴词制作动画，但这不是我想要的：

<a>Contact</a>
a {
 letter-spacing: 1px;
  transition: all .1s ease-in;
} 
a:hover {
 letter-spacing: 0.2em;  
}

我知道我应该逐字逐句地应用动画，但我怎样才能将它们展开？

谢谢

Answer 1

动画on give示例已由着名的动画库 Greensock 实现。

如果您真的想制作这类动画，请使用Timelinelite和Tweenmax类让您的手变得有点脏。

Answer 2

你可以像这样解决它

var spread = document.getElementsByClassName('spread');
[].forEach.call(spread, function(el) {
  // replace the content width divs
  el.innerHTML = '<span>' + el.innerText.split('').join('</span><span>') + '</span>'
  // custom :hover
  el.onmouseenter = function(e) {
    var childern = e.target.childNodes
    var width = e.target.offsetWidth / childern.length 
    for (var i = 0, child; child = childern[i]; i++) child.style.minWidth = width + 'px'
  }
  // remove custom style again
  el.onmouseleave = function(e) {
    var childern = e.target.childNodes
    for (var i = 0, child; child = childern[i]; i++) child.style.minWidth = '0'
  }
})

.spread  {
  text-align:center;
}
.spread span {
  display: inline-block;
  transition: all .5s ease;
  text-align:center;
  min-width: 0;
}

<h1 class="spread">
  Title
</h1>

导航栏中的动画标题

2 个答案: