如何以全宽滑入 div

Question

我想在带有几个盒子的移动设备上滑入一个 div，而盒子元素在滑入动画期间不会被切掉，如何使用 CSS 实现此目的？我有以下代码和 Jsfiddle link: https://jsfiddle.net/dealwap/prwdm724/。该问题仅发生在移动设备上。

HTML:

    .box {
      flex: 0 0 80px;
      height: 80px;
      background-color: red;
      margin: 10px;
      left: 10px;
    }

    .container{
      z-index: 10;
      width: 100%;
      position: relative;
      display: flex;
      justify-content: flex-start;
      margin: auto;
      overflow: auto;
      -ms-overflow-style: none;
      scrollbar-width: none;
      animation: 2s ease-in-out 0s 1 slideInFromLeft;
    }


    @keyframes slideInFromLeft {
      0% {
        transform: translateX(-100%);
      }
      100% {
        transform: translateX(0);
      }
    }

   <div class="container">
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
   </div>

Answer 1

.container{
  flex-wrap:wrap; 
}

如果我对你的问题理解正确，这就解决了问题。

    .box {
      flex: 0 0 80px;
      height: 80px;
      background-color: red;
      margin: 10px;
      left: 10px;
    }

    .container{
      z-index: 10;
      width: 100%;
      position: relative;
      display: flex;
      justify-content: flex-start;
      flex-wrap:wrap;
      margin: auto;
      overflow: auto;
      -ms-overflow-style: none;
      animation: 2s ease-in-out 0s 1 slideInFromLeft;
    }


    @keyframes slideInFromLeft {
      0% {
        transform: translateX(-100%);
      }
      100% {
        transform: translateX(0);
      }
    }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

   <div class="container">
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
   </div>

  </body>
</html>

Answer 2

在这种情况下，您需要提供 width 到 .box 元素。仅提供 flex-basis 是不够的。

仅

CSS:

body {
  overflow: hidden;
}

.box {
  flex: 0 0 80px;
  height: 80px;
  background-color: rgb(255, 130, 130);
  margin: 10px;
  left: 10px;
  width: 80px;
}

.container {
  font-size: 3rem;
  color: purple;
  width: fit-content;
  z-index: 10;
  position: relative;
  display: flex;
  justify-content: flex-start;
  margin: auto;
  overflow: auto;
  -ms-overflow-style: none;
  scrollbar-width: none;
  transform: translateX(-100%);
  animation: 2s ease-in-out 0s 1 slideInFromLeft normal forwards;
}

@keyframes slideInFromLeft {
  0% {
    transform: translateX(-100%);
  }
  99.99% {
    width: fit-content;
  }
  100% {
    width: 100%;
    transform: translateX(0);
  }
}

<div id='slideMe' class="container">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
  <div class="box">5</div>
  <div class="box">6</div>
  <div class="box">7</div>
  <div class="box">8</div>
  <div class="box">9</div>
  <div class="box">10</div>
</div>

使用JavaScript:
使用动画 API 这很容易实现。

const slideIn = new KeyframeEffect(slideMe, 
                             { transform: 'translateX(0%)' }, 
                             { fill: 'forwards', duration: 4000 });

const anim = new Animation(slideIn);
anim.onfinish = e => slideMe.style.width = '100%';

btn.onclick = (e) => {
  anim.play();
  e.target.style.visibility = 'hidden';
}

.box {
  flex: 0 0 80px;
  height: 80px;
  background-color: rgb(255, 130, 130);
  margin: 10px;
  left: 10px;

  width: 80px;
}

.container {
  font-size: 3rem;
  color: purple;
  width: fit-content;

  z-index: 10;
  position: relative;
  display: flex;
  justify-content: flex-start;
  margin: auto;
  overflow: auto;
  -ms-overflow-style: none;
  scrollbar-width: none;
  transform: translateX(-100%);
}

<button id='btn'>Show</button>
<div id='slideMe' class="container">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
  <div class="box">5</div>
  <div class="box">6</div>
  <div class="box">7</div>
  <div class="box">8</div>
  <div class="box">9</div>
  <div class="box">10</div>
</div>

Answer 3

您需要计算 .container 的全宽，然后将 translateX 更改为从视口中隐藏的宽度向左移动。并添加 animation 使其正确。
现在要计算全宽，可以使用 calce() 函数。我在变量 (--box-width) 中设置 .boxs 的宽度。并在计算函数中设置

calc( (box-width + side margins) * (- box number) )
add a minus sign for goes to left

calc( (var(--box-width) + 20px) * -10)

body{
   --box-width: 80px;
}
.container {
  z-index: 10;
  width: 100%; 
  position: relative;
  display: flex;
  justify-content: flex-start;
  margin: auto;
  animation: 2s ease-in-out 0s 1  slideInFromLeft;
}

.box {
  flex: 0 0 var(--box-width);
  height: 80px;
  background-color: red;
  margin: 10px;
}

@keyframes slideInFromLeft {
  0% {
  transform: translatex(calc( (var(--box-width) + 20px) * -10));
  }
  100% {
    transform: translateX(0);
  }
}

  <div class="container">
      <div class="box">1</div>
      <div class="box">2</div>
      <div class="box">3</div>
      <div class="box">4</div>
      <div class="box">5</div>
      <div class="box">6</div>
      <div class="box">7</div>
      <div class="box">8</div>
      <div class="box">9</div>
      <div class="box">10</div>
   </div>

并且在不知道 box 元素数量的情况下效果更好，有一点纯 js .

const container = document.querySelector('.container')
window.addEventListener('load', () => {
  childNumber = container.childElementCount
  container.style.setProperty('--childNumber', childNumber)
  container.classList.add('animated')
})

body{
   --box-width: 80px;
}
.container { 
  --childNumber : 0;
  display: flex;
  visibility: hidden;
  z-index: 10; 
  width: 100%; 
  position: relative;
  justify-content: flex-start;
  margin: auto;
}
.container.animated{
 visibility: visible;
  animation: 2s ease-in-out 0s 1  slideInFromLeft;
}

.box {
  flex: 0 0 var(--box-width);
  height: 80px;
  background-color: red;
  margin: 10px;
} 
@keyframes slideInFromLeft {
  0% {
  transform: translatex(calc( (var(--box-width) + 20px) * var(--childNumber) * -1));
  }
  100% {
    transform: translateX(0);
  }
}

<div class="container">
      <div class="box">1</div>
      <div class="box">2</div>
      <div class="box">3</div>
      <div class="box">4</div>
      <div class="box">5</div>
      <div class="box">6</div>
      <div class="box">7</div>
      <div class="box">8</div>
      <div class="box">9</div>
      <div class="box">10</div>
   </div>

Answer 4

实用：1.) flex-wrap:nowrap; 2.) transform: translateX(-200%);

    .box {
      flex: 0 0 80px;
      height: 80px;
      background-color: red;
      margin: 10px;
      left: 10px;
    }

    .container{
      z-index: 10;
      width: 100%;
      position: relative;
      display: flex;
      justify-content: flex-start;
      flex-wrap:nowrap;
      margin: auto;      
      -ms-overflow-style: none;
      animation: 2s ease-in-out 0s 1 slideInFromLeft;
    }

    @keyframes slideInFromLeft {
      0% {
        transform: translateX(-200%);
      }
      100% {
        transform: translateX(0);
      }
    }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

   <div class="container">
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
   </div>

  </body>
</html>

Answer 5

    .box {
      flex: 0 0 80px;
      height: 80px;
      background-color: red;
      left: 10px;
    }

    .container{
      z-index: 10;
      width: 100%;
      position: relative;
      display: flex;
      justify-content: flex-start;
      margin: auto;
      overflow: auto;
      -ms-overflow-style: none;
      animation: 2s ease-in-out 0s 1 slideInFromLeft;
    }


    @keyframes slideInFromLeft {
      0% {
        transform: translateX(-100%);
      }
      100% {
        transform: translateX(0);
      }
    }

如果你不希望它被切掉，那么就不需要边距，但如果你真的想要它，那么只需将它设置为自动

    .box {
      flex: 0 0 80px;
      height: 80px;
      margin: auto;
      background-color: red;
      left: 10px;
    }

    .container{
      z-index: 10;
      width: 100%;
      position: relative;
      display: flex;
      justify-content: flex-start;
      margin: auto;
      overflow: auto;
      -ms-overflow-style: none;
      animation: 2s ease-in-out 0s 1 slideInFromLeft;
    }


    @keyframes slideInFromLeft {
      0% {
        transform: translateX(-100%);
      }
      100% {
        transform: translateX(0);
      }
    }

但说实话，我真的不知道你需要什么，如果你只是不想让它离开屏幕，只需将 flex-wrap:wrap; 添加到 container

如何以全宽滑入 div

How To Slide in div with full width

html

css

css-animations

css-transitions