react framer-motion实现简洁选项卡tab切换效果代码-html代码-BFW代码库

代码语言：html

所属分类：选项卡

代码描述：react framer-motion实现简洁选项卡tab切换效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">
  

  <link href="https://fonts.googleapis.com/css?family=Karla:400,700&display=swap" rel="stylesheet"> 
  
  
  
<style>
:root {
  --line-size: 3px;
  --line-colour: #74c6e5;
  --hover-colour: #07698e;
}

body {
  padding: 30px;
  margin: 0;
  font-family: Helvetica, Arial, sans-serif;
}

ul, li {
  list-style: none;
  padding: 0;
  margin: 0;
}

.wrapper {
  max-width: 1000px;
  padding: 30px;
  margin: 0 auto;
}

.tab-content {
  padding: 30px 0;
  line-height: 1.6;
}

/* Tabs */
.tabs {
  display: block;
  position: relative;
}

.tabs-list {
  display: flex;
  border-bottom: var(--line-size) solid #ecf0f5;
}

.tabs-list__item {
  margin-right: 30px;
}

.tabs-list__tab {
  display: block;
  color: #2c3642;
  padding: 18px 6px;
  background: none;
  transition: background-color 600ms cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  text-decoration: none;
  font-weight: bold;
  white-space: nowrap;
}

.tabs-list__tab:after {
  content: '';
  position: absolute;
  top: 100%;
  left: 0;
  height: var(--line-size);
  width: 100%;
}

.tabs-list__tab:hover {
  color: var(--hover-colour);
}

.tabs-list__tab.active:after {
  background-color: var(--line-colour);
}

.tabs-list__tab.active.animating:after {
  background-color: transparent;
}

.tabs-list__underline {
  position: absolute;
  bottom: 0;
  left: 0;
  height: var(--line-size);
  background-color: var(--line-colour);
}
</style>




</head>

<body >
  <div id="root"></div>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/react.production.17.1.js"></script>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/react-dom.production.17.1.js"></script>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/framer-motion.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/react-router-dom.js"></script>
      <script >
const { HashRouter, Switch, Route, Redirect, Link, matchPath, useLocation } = ReactRouterDOM;
const { AnimatePresence, motion } = Motion;

const debounce = (func, wait, immediate) => {
  var timeout;
  return function () {
    var context = this,args = arguments;
    var later = function () {
      timeout = null;
      if (!immediate) func.apply(context, args);
    };
    var callNow = immediate && !timeout;
    clearTimeout(timeout);
    timeout = setTimeout(later, wait);
    if (callNow) func.apply(context, args);
  };
};

const Underline = ({ refs, activeRoute, finishAnimating, animating }) => {
  const [{ x, width }, setAttributes] = React.useState({
    x: 0,
    width: 0 });


  const updateAttributes = React.useCallback(() => {
    if (refs && refs[activeRoute]) {
      setAttributes({
        x: refs[activeRoute].current.offsetLeft,
        width: refs[activeRoute].current.getBoundingClientRect().width });

    }
  }, [activeRoute, refs]);

  // Update attributes if active route changes (or refs change)
  React.useEffect(() => {
    updateAttributes();
  }, [activeRoute, refs, updateAttributes]);

  // After window resize, recalculate
  React.useEffect(() => {
    const recalculateAttrs = debounce(() => {
      updateAttributes();
    }, 500);

    window.addEventListener('resize', recalculateAttrs);
    return () => {
      window.removeEventListener('resize', recalculateAttrs);
    };
  });

  return /*#__PURE__*/(
    React.createElement(motion.div, {
      className: "tabs-list__underline",
      animate: {
        x,
        width },

      style: {
        opacity: animating ? 1 : 0 },

      onAnimationComplete: finishAnimating }));


};

const Tab = React.forwardRef(
({ active, item, animating, startAnimating }, ref) => /*#__PURE__*/
React.createElement("li", { className: "tabs-list__item", key: `tab-${item.route}` }, /*#__PURE__*/
React.createElement(Link, {
  to: item.route,
  className: `tabs-list__tab.........完整代码请登录后点击上方下载按钮下载查看