时间戳

首页 > 解决方案 > 如何制作滑块动画？

css - 如何制作滑块动画？

问题描述

我需要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;
  }
}

有什么线索吗？

提前致谢。

标签： cssreactjsaccordionreact-bootstrap

解决方案

React JS 会让这一切变得简单

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

对于下拉容器，将垂直按钮线保留在与 Accordian 不同的 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

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

推荐阅读