Word改变阶段,CSS垂直动画循环

Question

我想这不是更好解释比这个:

---

我几乎用纯CSS完成了我想要的东西,但......

• 我必须手动设置每个单词的"位置"
• 如果附加了另一个单词,我必须再次计算所有内容
• 我无法设置每个单词的1秒时间,只能设置总动画时间
• 响应？就在我再次计算一切

---

代码是div overflow: hidden和带有negative margin-top(和动画)的子代.

现场演示:

body {
  font-size: 2em;
  font-family: sans-serif;
 }
 
 .animation {
    vertical-align: sub;
    height: 1em;
    overflow: hidden;
    display: inline-block;
    line-height: 2em;
 }
 
ul {
  animation: animation 10s infinite;
  padding: 0;
  margin-top: -0.55em;
  list-style: none;
}

@keyframes animation {
    0%        { margin-top: -0.55em }
    12.5%     { margin-top: -2.54em }
    25%       { margin-top: -4.55em }
    37.5%     { margin-top: -6.55em }
    50%       { margin-top: -8.5em }
    62.5%     { margin-top: -6.55em }
    75%       { margin-top: -4.55em }
    87.5%     { margin-top: -2.54em }
    100%      { margin-top: -0.55em }
}

 Lorem ipsum dolor sit
 
    <div class="animation">
      <ul>
        <li>golfish</li>
        <li>dog</li>
        <li>cat</li>
        <li>hamster</li>
        <li>fox</li>
      </ul>
    </div>
    
, consectetur adipiscing elit. 

---

所以...

我认为我无法解决我的问题,因为它们是CSS限制,所以......有可能用jQuery来解决这个问题吗？

Answer 1

你不需要 jQuery。这是一个使用 css 过渡的简单纯 js 解决方案。

\n\n

\r\n

\r\n

function createWordListAnimation(animNode, delay){\r\n  // Fetch the DOM elements.\r\n  var animWindow = animNode.querySelector(".animation-window");\r\n  var ul = animWindow.querySelector("ul");\r\n  var lis = ul.querySelectorAll("li");\r\n\r\n  // Copy the animation\'s window to create the gray list.\r\n  var grayList = animWindow.cloneNode(true);\r\n  var grayUl = grayList.querySelector("ul");\r\n  grayList.classList.remove("animation-window");\r\n  grayList.classList.add("animation-gray-list");\r\n  animNode.insertBefore(grayList, animWindow);\r\n\r\n  // This function shows the li number `liNum`.                     \r\n  function goTo(liNum){\r\n    var li = lis[liNum];\r\n    var liTop = li.getBoundingClientRect().top;\r\n    var ulTop = ul.getBoundingClientRect().top;\r\n    var liOffset = liTop - ulTop;\r\n    ul.style.top = -liOffset + "px";\r\n    grayUl.style.top = -liOffset + "px";\r\n  }\r\n\r\n  // Set up an interval that changes the current li every `delay` ms.\r\n  var current = 0;\r\n  // We need a boolean to know if the animation is going up or down.\r\n  var ascending = true;\r\n  // Create the interval.\r\n  return setInterval(function(){\r\n    ascending = ascending && current + 1 < lis.length || current === 0;\r\n    current = ascending ? current + 1: current - 1;\r\n    goTo(current);\r\n  }, delay);\r\n}\r\n\r\ncreateWordListAnimation(document.querySelector(".animation"), 1000 /* (ms) */);

\r\n

body {\r\n  font-size: 2em;\r\n  font-family: sans-serif;\r\n}\r\n\r\n.animation {\r\n  vertical-align: sub;\r\n  display: inline-block;\r\n  margin-top: -.1em;\r\n  margin-bottom: -.1em;\r\n  border-style: solid;\r\n  border-color: lightgray;\r\n  border-width: 1px;\r\n  height: 1.2em;\r\n}\r\n\r\n.animation-window {\r\n  position: relative;\r\n  height: 100%;\r\n  overflow: hidden;\r\n  background-color: white;\r\n}\r\n\r\n.animation-gray-list {\r\n  position: absolute;\r\n  color: lightgray;\r\n}\r\n\r\n.animation ul {\r\n  position: relative;\r\n  list-style: none;\r\n  top: 0;\r\n  padding: 0;\r\n  margin: 0;\r\n  transition: top 300ms;\r\n}\r\n\r\n.animation li {\r\n  margin: 0 .2em;\r\n  text-align: center;\r\n}

\r\n

Lorem ipsum dolor sit\r\n \r\n    <div class="animation">\r\n      <div class="animation-window">\r\n        <ul>\r\n          <li>golfish</li>\r\n          <li>dog</li>\r\n          <li>cat</li>\r\n          <li>hamster</li>\r\n          <li>fox</li>\r\n        </ul>\r\n      </div>\r\n    </div>,\r\n\r\nconsectetur adipiscing elit.

\r\n

\r\n

\r\n

\n\n

该解决方案的缺点是窗口不能透明（它必须隐藏灰名单）。仍然可以使其透明，但是您必须创建两个灰色列表 \xe2\x80\x93，一个在上面，一个在 \xe2\x80\x93 下面，这开始有点复杂。

\n