如何在调查答案之间获得平滑的Javascript / CSS转换?

时间:2017-05-22 14:09:03

标签: javascript css

我有一个位于页面右下角的小型调查窗口小部件。它使用Survicate来显示4或5个问题调查。

用户点击其中一个'surv-radio'div中的答案,javascript会在div中加载另一个问题。

<div class="surv-body">
  <div class="surv-hgroup">
    <div class="surv-description">Good morning. I've noticed you're a regular around here.
    </div>
    <div class="surv-title">Would you be interested in letting me know how you rate our app?
    </div>
  </div>
  <div class="surv-aligner-box">
    <div class="surv-radio" data-user_tag="" data-value="109747"> 
      <span class="surv-answer">Happy to help!</span> 
    </div>
    <div class="surv-radio" data-user_tag="" data-value="109748"> 
      <span class="surv-answer">Maybe later</span> 
    </div>
  </div>
</div>

这里的问题是div只是立即加载新内容。我正在寻找一个平滑的可能淡入/淡出过渡,在每个问题之间大约一秒钟。

我在这里尝试了一些CSS,但只有在加载第一组问题时才能使转换工作。

-webkit-transition: all .5s ease-in-out;
        transition: all .5s ease-in-out;

如果可能的话,我想要一个没有jQuery的原始Javascript解决方案。

由于

0 个答案:

没有答案