代码之家 › 专栏 › 技术社区 › arnaudambro

创建滚动菜单:只滚动一次

transition css-transitions arrays javascript

arnaudambro · 技术社区 · 7 年前

[编辑]

我在之后重新生成代码 numbtongue 暗示它现在看起来完全不同了,并且工作得很好。除了它只工作一次!一卷之后,它就不再卷了。。。我有两个功能:一个用于转换,另一个用于替换内容。在“transition”函数中,我选择将类添加到要转换的元素中,并为这些类添加一些CSS。当我运行我的代码时,似乎所有的事情都在完美地进行,除了转换没有发生。怎么了??

JSFIDDLE:JSFIDDLE。net/arnaudambro/ode8bowb/2/

[原件]

this awwwarded north-east-venture.com 在页面的右侧(根本没有我的广告,只是为了让你也知道我指的是什么,以便更好地理解我面临的问题)。

我想要的是:当有人点击菜单中的一个项目时,这个项目会直接向上,上面的项目会放在堆栈下面。我编造了一些在这里非常有效的东西:

JS Fiddle:jsfiddle。net/arnaudambro/7s6ncxyp/

但正如你所见,没有过渡。

下面是显示“工作”转换的代码:

JSFiddle:JSFiddle。net/arnaudambro/xtrvsgor/

为了使转换生效,我必须对JS中的第84、153、172和174行进行注释。

我尽我所能使过渡在整个菜单中工作,但似乎当我“填充新菜单”时,每个过渡都被终止了。

我的代码怎么了?

2 回复 | 直到 7 年前

boateng 7 年前

提示:点击链接会失去菜单位置(当前将其设置为数组大小=5),而应该循环使用其他链接(见附件)。。

arnaudambro 7 年前

成功经过一些暂停,我成功了。不幸的是,它正在工作,但仍然有点不稳定,因为似乎没有其他选择超时。我试图测量重新填充菜单以完成其工作所花费的时间,并将其作为setTimeout值,但它不起作用,时间太短。无论如何,它已经很有效了,很好!

/*------------------------------ Variables -----------------------------------*/

const menu = document.querySelector('.menu');
const items = [...document.querySelectorAll('.item')];
const itemsLink = [...document.querySelectorAll('.item-link')];
const itemsContent = [...document.querySelectorAll('.item-content')];

let translateYHeight = itemsLink[0].offsetHeight;
console.log(translateYHeight)
let textContentItemAtTheTopOfTheStack;
let transitionInSeconds;
let transitionInMilliSeconds;
let clickedItemIndex;

/*--------------------------- Functions - callbacks --------------------------*/

//Get the index. Called in the STEP 1.

function getTheIndexOfTheClickedItem(e) {
  //Variable
  let clicked;

  //We select the <p> only
  if (e.target.tagName == "LI") {
    clicked = e.target.firstElementChild.firstElementChild;
  } else if (e.target.tagName == "A") {
    clicked = e.target.firstElementChild;
  } else if (e.target.tagName == "P") {
    clicked = e.target;
  } else {
    return false;
  }

  //Nothing happen if we clicked on the first item
  if (clickedItemIndex === 0) {
    return;
  }

  //We get the index of the clicked item
  clickedItemIndex = items.indexOf(clicked.parentElement.parentElement);

  //We get the textContent of the clicked item, so that when the textContent
  //of the first item in the menu is the proper textContent, we are done
  textContentItemAtTheTopOfTheStack = itemsContent[clickedItemIndex].textContent;

  //We set the total transition time to 1 second
  transitionInSeconds = 1 / clickedItemIndex;
  transitionInMilliSeconds = transitionInSeconds * 1000;

  translateAndFade();
}

/*--------------------------- STEP 1 --------------------------*/

function translateAndFade() {

  //We put the proper transition depending on when the translateAndFade function
  //is called
  let transitionStyle;

  if (clickedItemIndex === 1) {
    transitionStyle = 'ease-in-out';
  } else if (itemsLink[1].textContent.trim() === textContentItemAtTheTopOfTheStack) {
    transitionStyle = 'ease-out';
  } else if (itemsLink[clickedItemIndex].textContent.trim() === textContentItemAtTheTopOfTheStack) {
    transitionStyle = 'ease-in';
  } else {
    transitionStyle = 'linear';
  }

  //We add the transitions and fadings we want
  itemsLink.forEach(link => {
    if (itemsLink.indexOf(link) === 0) {
      //We add the fade-out for the first menu-item
      link.style.opacity = 0;
      link.style.transform = `translateY(-${translateYHeight}px)`;
      link.style.transition = `all ${transitionInSeconds}s ${transitionStyle}`;
    } else if (itemsLink.indexOf(link) === (itemsLink.length - 1)) {
      //We add the fade-in for the last menu-item
      link.firstElementChild.textContent = itemsLink[0].textContent.trim();
      link.style.opacity = 1;
      link.style.transform = `translateY(-${translateYHeight}px)`;
      link.style.transition = `all ${transitionInSeconds}s ${transitionStyle}`;
    } else {
      //We translate every menu-item one step up
      link.style.transform = `translateY(-${translateYHeight}px)`;
      link.style.transition = `all ${transitionInSeconds}s ${transitionStyle}`;
    }
  });

  //We call repopulateMenu, to repopulate the menu, with enough timeout to
  //let the transition happening
  window.setTimeout(repopulateMenu, transitionInMilliSeconds);
}

/*--------------------------- STEP 2 --------------------------*/


function repopulateMenu() {

  //We remove the transitions
  itemsLink.forEach(link => {
    if (itemsLink.indexOf(link) === 0) {
      //We remove the fade-out for the first menu-item
      link.style.opacity = 1;
      link.style.transform = ``;
      link.style.transition = ``;
    } else if (itemsLink.indexOf(link) === (itemsLink.length - 1)) {
      //We remove the fade-in for the last menu-item
      link.style.opacity = 0;
      link.style.transform = ``;
      link.style.transition = ``;
    } else {
      //We remove the translation of all of them
      link.style.transform = ``;
      link.style.transition = ``;
    }
  });

  //We update the textContents
  itemsContent.forEach(item => {
    // We put back emptiness for the last menu-item
    if (itemsContent.indexOf(item) === (itemsContent.length - 1)) {
      item.textContent = '';
    } else {
      //We replace the content of the item by the one below it
      item.textContent = itemsContent[itemsContent.indexOf(item) + 1].textContent.trim();
    }
  });

  //We do all again until the proper item-menu is on top of the stack.
  if (itemsContent[0].textContent != textContentItemAtTheTopOfTheStack) {
    window.setTimeout(translateAndFade, 20);
  } else {
    return;
  }
}



/*--------------------------- Event listeners --------------------------------*/
menu.addEventListener('click', getTheIndexOfTheClickedItem);

html,
body {
  font-family: sans-serif;
  font-weight: 100;
  color: rgba(41, 44, 45, 1.00);
}

.menu {
  margin-top: 50px;
  margin-left: 50px;
  list-style: none;
  /*border: 1px solid #000;*/
}

.transition-translateY {
  transition: all 1s;
  transform: translateY(-44px);
}

.transition-fadeIn {
  transition: all 1s;
  transform: translateY(-44px);
  opacity: 1;
}

.transition-fadeOut {
  transition: all 1s;
  transform: translateY(-44px);
  opacity: 0;
}

.item {
  padding-top: 2px;
  padding-bottom: 2px;
  font-size: 0.75em;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  text-align: left;
  /*border: 1px solid #000;*/
}

.item-link,
.item-link:hover {
  height: 25px;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  text-decoration: none;
  color: inherit;
}

<body>
  <ul class="menu">
    <li class="item">
      <a href="#" class="item-link">
        <p class="item-content" data-menu-position="0">Item 1</p>
      </a>
    </li>
    <li class="item">
      <a href="#" class="item-link">
        <p class="item-content" data-menu-position="1">Item 2</p>
      </a>
    </li>
    <li class="item">
      <a href="#" class="item-link">
        <p class="item-content" data-menu-position="2">Item 3</p>
      </a>
    </li>
    <li class="item">
      <a href="#" class="item-link">
        <p class="item-content" data-menu-position="3">Item 4</p>
      </a>
    </li>
    <li class="item">
      <a href="#" class="item-link">
        <p class="item-content" data-menu-position="4">Item 5</p>
      </a>
    </li>
    <li class="item">
      <a href="#" class="item-link" style="opacity:0">
        <p class="item-content" data-menu-position="5"></p>
      </a>
    </li>
  </ul>



</body>