时间戳

首页 > 解决方案 > 如何向 CSS 滑块导航添加过渡？

html - 如何向 CSS 滑块导航添加过渡？

问题描述

我想只使用 css 和 html 制作一个像水平导航一样的滑块

我正在使用 css:target来移动到所需的目标部分。

到目前为止一切顺利......请参见下面的示例：

body {
  margin: 0;
  overflow: hidden;
}
.main {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}
section {
  position: absolute;
  width: 100vw;
  height: 100Vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  transition: all .3s;
}
#section1 {
    background: bisque;
    transform: translateX(calc(0));
}
#section2 {
    background: #f8cc99;
    transform: translateX(calc(100vw * 1));
}
#section3 {
    background: #efcfa9;
    transform: translateX(calc(100vw * 2));
}
#section4 {
    background: #ffe7c9;
    transform: translateX(calc(100vw * 3));
}
<div class="main">
 <section id="section1">
   <div class="container">
     <h1>Section 1</h1>
   </div>
   <div class="arrow"><a href="#section2">==></a></div>
 </section>
 <section id="section2">
   <div class="container">
     <h1>Section 2</h1>
   </div>
   <div class="arrow"><a href="#section3">==></a></div>
 </section>
 <section id="section3">
   <div class="container">
     <h1>Section 3</h1>
   </div>
   <div class="arrow"><a href="#section4">==></a></div>
 </section>
 <section id="section4">
   <div class="container">
     <h1>Section 4</h1>
   </div>
   <div class="arrow"><a href="#section1">==></a></div>
 </section>
</div>

然后我想为过渡添加一个效果，我正在尝试，transform translate and transition translate但不幸的是我无法让它正常工作

看看我在下面的意思：

body {
  margin: 0;
  overflow: hidden;
}
.main {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}
section {
  position: absolute;
  width: 100vw;
  height: 100Vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  transition: all .3s;
}
#section1 {
    background: bisque;
    transform: translateX(calc(0));
}
#section2 {
    background: #f8cc99;
    transform: translateX(calc(100vw * 1));
}
#section3 {
    background: #efcfa9;
    transform: translateX(calc(100vw * 2));
}
#section4 {
    background: #ffe7c9;
    transform: translateX(calc(100vw * 3));
}
#section2:target {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);

}
#section3:target {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);

}
#section4:target {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);

}
<div class="main">
 <section id="section1">
   <div class="container">
     <h1>Section 1</h1>
   </div>
   <div class="arrow"><a href="#section2">==></a></div>
 </section>
 <section id="section2">
   <div class="container">
     <h1>Section 2</h1>
   </div>
   <div class="arrow"><a href="#section3">==></a></div>
 </section>
 <section id="section3">
   <div class="container">
     <h1>Section 3</h1>
   </div>
   <div class="arrow"><a href="#section4">==></a></div>
 </section>
 <section id="section4">
   <div class="container">
     <h1>Section 4</h1>
   </div>
   <div class="arrow"><a href="#section1">==></a></div>
 </section>
</div>

我可以在固定位置的情况下做到这一点，但我想保持水平滚动

任何帮助将不胜感激谢谢

标签： htmlcssnavigationeffect

解决方案

scroll-behavior: smooth您可以通过添加到您的部分容器来解决此问题 。您不必为它添加任何过渡。

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@500&display=swap');
body{
  overflow:hidden;
  margin:0px;
  font-family:'Roboto', sans-serif;
}
.main {
  height: 100vh;
  display: flex;
  overflow-y:hidden;
  overflow-x: auto;
  scroll-behavior: smooth;
}

section {
  width: 100vw;
  height: 100%;
  transition: all .3s;
  flex-shrink: 0;
  position: relative;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}

section a {
  color: #ffffff;
  text-decoration: none;
  font-size: 18px;
  background: rgba(0, 0, 0, 0.5);
  padding: 10px 25px;
  border-radius: 50px;
  margin-top: 15px;
}

section a:hover {
  color: #ffffff
}

h1 {
  color: #ffffff;
}

#section1 {
  background: #6200EE;
}

#section2 {
  background: #03DAC6;
}

#section3 {
  background: #1a1a1a;
}

#section4 {
  background: #ff4500;
}
<!DOCTYPE html>
<html>
   <head>
      <title>Sample</title>
   </head>
   <body>
      <div class="main">
         <section id="section1">
            <h1>Section 1</h1>
            <a href="#section2">Go to Section 2</a>
         </section>
         <section id="section2">
            <h1>Section 2</h1>
            <a href="#section3">Go to Section 3</a>
         </section>
         <section id="section3">
            <h1>Section 3</h1>
            <a href="#section4">Go to Section 4</a>
         </section>
         <section id="section4">
            <h1>Section 4</h1>
            <a href="#section1">Go to Section 1</a>
         </section>
      </div>
   </body>
</html>

注意：该scroll-behaviour属性支持以下浏览器版本：

浏览器支持

更多信息请访问：CSS scroll-behavior 属性

推荐阅读