尝试获取进度微调使用CSS淡入淡出 [英] Trying to get a progress spinner to fade in using CSS

问题描述

我想让微调器淡入，我正在使用这个进度微调器： JQuery Progress Spinner

它允许指定一个CSS类来添加CSS效果，我称之为spinner。

我的旋转器类的CSS是：

  .spinner {
 -moz- transition：opacity 2s linear ; 
 -o-transition：opacity 2s linear; 
 -webkit-transition：opacity 2s linear; 
 transition：opacity 2s linear; 
 border：1px solid red; 
} 
  

但它不工作。我使用这个与Ajax，并且如果响应是< 1秒然后我不想要进度微调，所以在这种情况下它不会褪色。除了它，所以我得到旋转约50ms，这是不理想的。

我想有一些东西，而是微不足道，这是不正确的我的CSS。

编辑1：

$ b

解决方案

我的CSS是正确的，你只有缺乏逻辑知道什么时候隐藏 .spinner 。你可以使用这样的：

  / * CSS * / 
 .spinner { 
 -webkit-transition：opacity 2s linear; 
 -moz-transition：opacity 2s linear; 
 -o-transition：opacity 2s linear; 
 transition：opacity 2s linear; 
 border：1px solid red; 
 opacity：1.0; 
} 
 
 .hidden {
 opacity：0.0; 
} 
  

并添加一个调用隐藏 .spinner 。这个示例在点击按钮时隐藏它，您可以使用 ajax（）。done（）来处理您的代码。

  // JavaScript 
 $（＃hide）。click（function（）{
 $（＃foo ）.addClass（hidden）; 
}）; 
  

我已经为此设置了一个示例 JSFiddle 。

I am trying to get a spinner to fade in. I am using this progress spinner: JQuery Progress Spinner

It allows one to specify a CSS class to add CSS effects, which I have called spinner.

My CSS for the spinner class is :

.spinner {
  -moz-transition: opacity 2s linear;
  -o-transition: opacity 2s linear;
  -webkit-transition: opacity 2s linear;
  transition: opacity 2s linear;
  border: 1px solid red;
}

But it does not work. I am using this with Ajax, and if the response is < 1 sec then I do not want the progress spinner, so in this case it will not have faded in. Except it does, so I get the spinner appearing for about 50ms which is not ideal.

I guess there is something, rather trivial, that is incorrect with my CSS.

EDIT 1:

I am transitioning from transparent(white which is my background colour) to the spinner.

解决方案

Your CSS is correct, you only lack logic to know when to hide the .spinner. You could use something like this:

/* CSS */
.spinner {
    -webkit-transition: opacity 2s linear;
       -moz-transition: opacity 2s linear;
         -o-transition: opacity 2s linear;
            transition: opacity 2s linear;
    border: 1px solid red;
    opacity: 1.0;
}

.hidden {
    opacity: 0.0;
}

And add a call to hide the .spinner. This example hides it when button is clicked, you could use ajax().done() to work with your code.

// JavaScript
$("#hide").click(function () {
    $("#foo").addClass("hidden");
});

I have set up an example on this JSFiddle.

这篇关于尝试获取进度微调使用CSS淡入淡出的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！