Question

我有一个列表项目，该项目在容器内从左到右动画。

列表中的每个项目都包含两个跨度，并且它们正在一起制作动画。

我想不出一种正确的方法，将每个第二个跨度放入容器中并分别为其设置动画。

这样我们就有了第一个和第二个跨接的动画。

我们应该拥有：

1）首先，第一个跨度（shuffled_dataset = torch.utils.data.Subset(my_dataset, torch.randperm(len(my_dataset)).tolist()) dataloader = DataLoader(shuffled_dataset, batch_size=4, num_workers=4, shuffled=False)和First Span A:）从左到右进行动画

2）在第一个跨度动画结束之后，第二个跨度从左到右动画化（First Span B:和Second Span A）。（第二个跨度都应有其容器）

Second Span B

//Add Animations
setTimeout(function(){
   list.classList.add("element-animation");
}, 3700)

.containerList {
  position: absolute; 
  overflow: hidden; 
  width: 100vw;
  height: 92vh;
  top: 3vh;
  left:3vw;
  background: black;
  opacity: 0.2;
  outline: 0.1vw dashed orange;
}

ul#list{
  position: absolute;
  list-style-type: none;
  font-family: 'Open Sans', sans-serif;
  font-weight:400; 
  font-size: 8.7vh;
  color: #b3a2c7;
  padding-left: 10vh;
  margin-top: 6vh;
  margin-bottom: 6vh;
  top: 15vh;
  left:14vw;  
  opacity: 0;
}

ul li span:nth-child(2) {
 padding-left:3vh;
 font-family: 'Open Sans', sans-serif;
 font-weight:400;
 color: #ccc1da;
}

ul li:not(:last-child) {
     margin-bottom: 0.5vh;
}

.element-animation{
  -webkit-animation: animationFrames ease-out 5s;
  -webkit-animation-iteration-count: 1;
  -webkit-transform-origin: 50% 50%;
  -webkit-animation-fill-mode:forwards;
}

@-webkit-keyframes animationFrames {
  0% {
    opacity:0;
    -webkit-transform:  translate(-200px,0px)  ;
  }
  8% {
    opacity:1;
    -webkit-transform:  translate(0px,0px)  ;
  }
  100% {
    opacity:1;
    -webkit-transform:  translate(0px,0px)  ;
  }
}

Answer 1

我不会将动画应用于整个列表，但是列表项本身。之后，您可以使用animation-delay属性来延迟动画。

但是，由于您有n个要设置动画的跨度，并且不想编写n个延迟变化的数量，因此，另一种方法是添加一个会以交错的方式制作动画。

此示例将您的示例简化为最基本的示例。如果要更改id数组中spans的显示顺序，则可以更改它们的顺序。

// Change order of ids to affect appearance order
const spans = [
  "span-first",
  "span-third",
  "span-second",
  "span-fourth"
].map(el => document.getElementById(el));

async function $timeout(duration = 1000) {
  return new Promise(resolve => setTimeout(resolve, duration));
}

(async function() {
  spans.forEach(el => el.classList.add("fade-right--pre"));

  for (const span of spans) {
    span.classList.add("fade-right--during");
    await $timeout();
    span.classList.add("fade-right--post");
  }
}());

ul {
  list-style: none;
}

.fade-right--pre {
  opacity: 0;
  transform: translateX(-200px);
}

.fade-right--during {
  animation: fadeRightAnim 5s ease-out;
}

.fade-right--post {
  opacity: 1;
  transform: translateX(0);
}

@keyframes fadeRightAnim {
  0% {
    opacity: 0;
    -webkit-transform: translate(-200px, 0px);
  }
  8% {
    opacity: 1;
    -webkit-transform: translate(0px, 0px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translate(0px, 0px);
  }
}

<ul>
  <li>
    <span id="span-first">First Span A:</span>
    <span id="span-second">Second Span A</span>
  </li>
  <li>
    <span id="span-third">First Span B:</span>
    <span id="span-fourth">Second Span B</span>
  </li>
</ul>

如何分别对列表项中的跨度进行动画处理

1 个答案: