Question

在下面的代码中，我有一个跨度，该跨度显示在nav元素的鼠标悬停上。

我想对此进行动画处理，但不知道如何做。

我想在跨度中滑动内容。

$(() => {
  $('nav').hover(() => {
    $('nav').addClass('open')
  }, () => {
  	$('nav').removeClass('open')
  })
})

main {
  height: 100%;
  display: flex;
  flex: 1 1;
}

aside {
  border-right: 2px solid #f0f0f0;
  padding-top: 16px !important;
  border-top: 1px solid #f0f0f0;
  border-bottom: 1px solid #f0f0f0;
  background: #fff;
}

nav {
  width: 100%;
}

ul {
  display: flex;
  flex-direction: column;
}

span {
  display: inline-block;
}

span+span {
  display: none;
}

nav.open span+span {
  display: inline-block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<html>

  <head></head>

  <body>
    <main>
      <aside>
        <nav>
          <ul>
            <li><a href="">
              <span>One</span>
              <span>Two</span>
            </a></li>
            <li><a href="">
              <span>One</span>
              <span>Two</span>
            </a></li>
            <li><a href="">
              <span>One</span>
              <span>Two</span>
            </a></li>
          </ul>
        </nav>
      </aside>
    </main>
  </body>

</html>

从显示转换时添加动画：无到块

0 个答案: