如何制作滑块动画？

如何解决如何制作滑块动画？

我需要制作垂直滑块动画（ dots and line ），如这张图片所示

我设法做手风琴和点，但我不知道我将如何实现它（我正在使用伪）

**我的手风琴组件我在其中根据数据数组定义嵌套手风琴的逻辑**

function MultiLevelAccordion({
  data,bodyClass,headerClass,wrapperClass,renderHeader,renderContent,}) {
  const RootAccordionId = 'parent-0';
  const [accordionsstates,setActiveCardsIndex] = useMergeState({});

  const onAccordionToggled = (id,activeEventKey) => {
    console.log(activeEventKey);
    setActiveCardsIndex({
      [id]: activeEventKey ? Number(activeEventKey) : activeEventKey
    });
  };
  
  console.log('data',data);
  const accordionGenerator = (data,parentId) => { 
    return map(data,(item,index) => {
      const active = accordionsstates[parentId] === index;
      const hasChildren = item.hasOwnProperty('children') && isArray(item.children) && !isEmpty(item.children);
      const isRootAccordion = RootAccordionId === parentId;
      const isLastnestedAccordion = !isRootAccordion && !hasChildren;

      const accordion = (
        <Card className={classNames(wrapperClass,{
          'nested-root-accordion': !isRootAccordion,'last-nested-root-accordion': isLastnestedAccordion,'multi-level-accordion': !isLastnestedAccordion
        })}
        >
          <Accordion.Toggle
            {...{ ...item.id && { id: item.id } }}
            onClick={() => this}
            as={Card.Header}
            eventKey={`${index}`}
            className={'cursor-pointer d-flex flex-column justify-content-center'}
          >
            <div className="d-flex justify-content-between align-items-center">
              {renderHeader(item,hasChildren)}

              <img
                style={{
                  transition: 'all .5s ease-in-out',transform: `rotate(${active ? 180 : 0}deg)`
                }}
                src={setIcon('arrow-down')}
                className="ml-2"
                alt="collapse"
              />
            </div>
          </Accordion.Toggle>
          <Accordion.Collapse eventKey={`${index}`}>
            <Card.Body
              className={`accordion-content-wrapper ${!hasChildren ? 'accordion-children-body' : ''} ${bodyClass}`}
            >
              {!hasChildren ? renderContent(item,hasChildren) : (
                <Accordion onSelect={activeEventKey => onAccordionToggled(`${parentId}-${index}`,activeEventKey)}>
                  <Fade cascade top when={active}>
                    {accordionGenerator(item.children,`${parentId}-${index}`)}
                  </Fade>
                </Accordion>
              )}
            </Card.Body>
          </Accordion.Collapse> 
        </Card>
      );

      return isRootAccordion ? accordion : (
        <div className={'d-flex align-items-center'}>
          {accordion}
          <div className="accordion-indicator-wrapper">
            <div className="accordion-indicator" id={`indicator-${parentId}-${index}`} />
          </div>
        </div>
      );
    });
  };

  if (!isArray(data)) {
    return;
  }

  return (
    <Accordion onSelect={activeEventKey => onAccordionToggled(RootAccordionId,activeEventKey)}>
      {accordionGenerator(data,RootAccordionId)}
    </Accordion>
  );
}


export default MultiLevelAccordion;

scss中使用的样式

.faqs-questions-wrapper {
  padding: 20px 10px
}

.faqs-q-count {
  color: $black-color;
  font-size: calc(1rem - 1rem/8)
}

.faqs-q-a-wrapper {
  flex-basis: 95%;
}

.faq-child-title {
  color: $black-color
}

.nested-root-accordion {
  flex-basis: 90%;
}

.accordion-indicator-wrapper {
  flex-basis: 10%;
  width: 100%;
  display: flex;
  justify-content: center;

  .accordion-indicator {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: $theme-color;
    position: relative;
  }
}

有什么线索吗？

提前致谢。

解决方法

React JS 让这一切变得简单

行扩展需要根据框窗口的高度进行编码

对于下拉容器，将垂直按钮线保留在与手风琴不同的 div 中

看看这支笔在按钮之间创建线条 https://codepen.io/cataldie/pen/ExVGjya css部分：

.status-container{
  padding:10px;
  margin:10px;
  position:relative;
  display: inline-block;
}
.bullet{
  padding:0px;
  margin:0px;
  display: inline-block;
  z-index: 10;
}
.bullet:before {
  content: ' \25CF';
  font-size: 5em;
}
.bullet-before{
  /*position:relative;
  right:-12px;*/
}
.bullet-after{
  /*position:relative;
  left:-30px;*/
}
.line{
  stroke:blue;
  stroke-width:0.3em;
  padding:0px;
  margin:0px;
  display: inline-block;
}
.line-on{
  stroke:red;
}
.line-off{
  stroke:gray;
}
.color-on{
  color: red;
}
.color-off{
  color: gray;
}

https://codepen.io/emwing/pen/LgzJOx

我认为你可以在这里使用一些灵感