如何向 CSS 滑块导航添加过渡效果？

Question

我只想使用 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>

我可以固定位置，但我想保持水平滚动

任何帮助将不胜感激谢谢

Answer 1

您可以通过将 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 Property

如何向 CSS 滑块导航添加过渡效果？

How can I add transitions to CSS slider navigation?

html

css

navigation

effect