Question

我有很多问题：

<div id='q1'>question...</div>
<div id='q2'>question...</div>
<div id='q3'>question...</div>
etc...

任何时候都只能看到一个问题div。

我希望每个问题都消失，而新问题又恰好在上一个问题所在的位置消失。

我正在使用此CSS进行淡入淡出过渡：

.fade-out {
    opacity: 0;
    animation-name: fadeOutOpacity;
    animation-iteration-count: 1;
    animation-timing-function: ease-out;
    animation-duration: 1s;
}


.fade-in {
    opacity: 1;
    animation-name: fadeInOpacity;
    animation-iteration-count: 1;
    animation-timing-function: ease-in;
    animation-duration: 2s;
    transition-delay: 4s;
}

@keyframes fadeInOpacity {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes fadeOutOpacity {
    0% {
        opacity:1;
    }
    100% {
        opacity:0;
    }
}

但是，当第二个问题应用了fade-in css类时，它将使第一个问题在消失之前就跳起来。

理想情况下，我希望第一个问题消失，并成为display: none;

但是我正在努力使其正常工作。

问题

如何将第一个问题“淡出”并在第二个地方“淡入”？

NB 我宁愿使用纯CSS解决方案，也不使用Jquery解决方案...

Answer 1

就像大多数纯CSS解决方案一样，您可能希望利用输入元素。在这里，我使用带有标签的收音机类型来解决下一个问题。

由于您仅更改不透明度，因此可能需要使用过渡而不是动画。我在这里使用的速记可以这样扩展：

transition: property-name duration easing delay;

这是一个有效的示例：

/* wrapper to hold absolute positioned children */
.wrapper {
  position: relative;
}

/* hide actual radio buttons */
.wrapper input {
  display: none
}

.question {
  /* float above each other */
  position: absolute;
  /* transparency by default */
  opacity: 0;
  /* fade out without delay */
  transition: opacity 1s ease-out;
}

input:checked + .question {
  /* always put current question first */
  z-index: 1;
  /* fade in with delay */
  opacity: 1;
  transition: opacity 2s ease-in 1s;
}

<div class="wrapper">
  <input id="question-1" type="radio" name="question" checked>
  <div class="question">
    <p>Question 1</p>
    <label for="question-2">next</label>
  </div>

  <input id="question-2" type="radio" name="question">
  <div class="question">
    <p>Question 2</p>
    <label for="question-3">next</label>
  </div>

  <input id="question-3" type="radio" name="question">
  <div class="question">
    <p>Question 3</p>
    <label for="question-1">start over</label>
  </div>
</div>

Answer 2

尝试此示例：

    factory = [&]() {
        return std::make_unique<T>(std::forward<Args>(args)...);
    };

template<class... Args>
ConstructLater(Args &&... args)
{
  std::tuple<TODO...> tup = remove_const_remove_ref<Args...>(args);
  factory = [=]() {
      return std::make_unique<T>(cast_tuple<Args...>(tup)...);
  };
}

Answer 3

您可以轻松完成此操作，而无需使用animation，而只需要transition。

运行以下代码片段示例：

function doNext() {
  let el = document.querySelector('.questions [showing]');
  el.removeAttribute('showing');
  let temp = el.nextElementSibling;
  if (temp === null) {
    temp = el.parentElement.firstElementChild;
  }
  
  temp.setAttribute('showing', '');
}

const btn = document.querySelector('#next');
btn.addEventListener('click', doNext);

.questions {
  height: 60px;
  position: relative;
}

.fader {
  left: 0;
  opacity: 0;
  position: absolute;
  top: 0;
  transition: all 1s ease;
}

.fader[showing] {
  opacity: 1;
  transition: all 1s ease 0.75s;
}

<div class="questions">
  <div id='q1' class="fader" showing>question...1</div>
  <div id='q2' class="fader">question...2</div>
  <div id='q3' class="fader">question...3</div>
  <div id='q4' class="fader">question...4</div>
</div>
<button id="next">Next</button>

当属性showing被删除时，问题的opacity在1秒钟内从1变为0。添加属性showing之后，元素将等待0.75秒，然后在1秒内将opacity从0更改为1。

我简单添加的JavaScript允许更改具有属性showing的元素。您的代码需要执行类似的操作来更改显示的问题。

我将每个问题的位置设置为absolute，而将top设置为0，以便所有问题都显示在同一位置。但这样做需要您知道问题的最大大小，以便可以将容器设置为正确的高度。

如何淡出html元素并淡入新元素

3 个答案: