Question

我需要用div块来完成动画。我想在几秒钟后将div块更改为另一个，但是我只需要在移动版本中进行。在计算机版本中，它可以按我的意愿工作，但在移动版本中，它不起作用，我的意思是我的第二个div块不会出现在第一个块之后。有什么问题？

CSS：

.div-wrap {
  display: flex;
  align-items: center;
  flex-flow: column nowrap;
  justify-content: space-between;
  text-align: center;
}

:root {
  --time: 24;
}

.div-txt {
  height: 180px;
  padding-top: 20px;
}

.div-wrap-txt {
    margin-bottom: 70px;
    width: 350px;
}

.div-wrap-txt:nth-child(1) .div-txt:nth-child(1)  {
    animation-delay: 0s;
}

.div-wrap-txt:nth-child(1) .div-txt:nth-child(2)  {
    animation-delay: calc(var(--time) / 4 * 1s);
}

.div-wrap-txt:nth-child(3) .div-txt:nth-child(1)  {
    animation-delay: calc(var(--time) / 2 * 1s);
}

.div-wrap-txt:nth-child(3) .div-txt:nth-child(2)  {
    animation-delay: calc(var(--time) / 1.33 * 1s);
}

.div-txt {
    animation-duration: calc(var(--time) * 1s);
    animation-iteration-count: infinite;
    animation-name: color-change;
    text-align: right; 
}      

@keyframes color-change {
    0%,
    25%,
    100% {
        background-color: #fff;
        box-shadow: 0 0 0 rgba(0,0,0,0.1);
    }

    1%,
    24% {
        box-shadow: 0 10px 90px rgba(0, 0, 0, 0.4);
    }
}

@media all and (min-width: 1170px) {
  .div-wrap {
    flex-flow: row nowrap;
    justify-content: space-around;
  }
}

@media screen and (max-width: 1170px) {
    #two {
        display: none;
    }
    #three {
        display: none;
    }
    #four {
        display: none;
    }
}

HTML：

<div class="div-wrap">
<div class="div-wrap-txt">
<div class="div-txt" id="one" style="padding-right: 35px;">
  <p>turn<br> on it and connect application <br>with device.</p>
</div>
<div class="div-txt" id="two" style="padding-right: 35px; margin-top: 50px;">
  <p>After connection set up calibration to help device remember your upright and slouch positions.</p>
</div>
</div>
<div class="div-img">
</div>
<div class="div-wrap-txt">
<div class="div-txt" id="three" style="text-align: left; padding-left: 25px;">
  <p>Train your posture anytime you want, <br>set up daily goal to improve gradually <br>your posture.</p>
</div>
<div class="div-txt" id="four" style="text-align: left; padding-left: 25px; margin-top: 50px;">
  <p>Statistics let track and analyze the <br>progress you’ve made from first <br>training to the last.</p>
</div>
</div>
</div>

JS：

setInterval(function() {
    for( let i=0;i<4;i++) {
        if(i==0) {
          document.getElementById('#two')[i].style.opacity = 0;           
        } else {
          document.getElementById('#three')[i].style.opacity = 0;
          document.getElementById('#four')[i].style.opacity = 0; 
        } 
    }
},4000);

也许我的js代码有问题，您能在这个问题上帮我吗？

js上的自适应动画

0 个答案: