Question

我从代码中获得了一个进度条，我从网站上获取了一个进度条，现在我要做的就是在百分比变化时添加转换，这样它就不会简单地“捕捉”到该位置，而是轻松，但由于某种原因，它将无法正常工作

Heres the mark up

<div class="meter">
<span style="width: 25%"></span>
</div>

和CSS

 .meter { 
height: 20px;  /* Can be anything */
position: relative;
background: #555;
-moz-border-radius: 25px;
-webkit-border-radius: 25px;
border-radius: 25px;
padding: 10px;
-webkit-box-shadow: inset 0 -1px 1px rgba(255,255,255,0.3);
-moz-box-shadow   : inset 0 -1px 1px rgba(255,255,255,0.3);
box-shadow        : inset 0 -1px 1px rgba(255,255,255,0.3);
}
.meter > span {
display: block;
height: 100%;

   -webkit-border-top-right-radius: 8px;
-webkit-border-bottom-right-radius: 8px;
       -moz-border-radius-topright: 8px;
    -moz-border-radius-bottomright: 8px;
           border-top-right-radius: 8px;
        border-bottom-right-radius: 8px;
    -webkit-border-top-left-radius: 20px;
 -webkit-border-bottom-left-radius: 20px;
        -moz-border-radius-topleft: 20px;
     -moz-border-radius-bottomleft: 20px;
            border-top-left-radius: 20px;
         border-bottom-left-radius: 20px;
background-color: rgb(43,194,83);
background-image: -webkit-gradient(
  linear,
  left bottom,
  left top,
  color-stop(0, rgb(43,194,83)),
  color-stop(1, rgb(84,240,84))
 );
background-image: -webkit-linear-gradient(
  center bottom,
  rgb(43,194,83) 37%,
  rgb(84,240,84) 69%
 );
background-image: -moz-linear-gradient(
  center bottom,
  rgb(43,194,83) 37%,
  rgb(84,240,84) 69%
 );
background-image: -ms-linear-gradient(
  center bottom,
  rgb(43,194,83) 37%,
  rgb(84,240,84) 69%
 );
background-image: -o-linear-gradient(
  center bottom,
  rgb(43,194,83) 37%,
  rgb(84,240,84) 69%
 );
-webkit-box-shadow: 
  inset 0 2px 9px  rgba(255,255,255,0.3),
  inset 0 -2px 6px rgba(0,0,0,0.4);
-moz-box-shadow: 
  inset 0 2px 9px  rgba(255,255,255,0.3),
  inset 0 -2px 6px rgba(0,0,0,0.4);
position: relative;
overflow: hidden;

}

这是我放入.meter > span

的代码

   transition: opacity .25s ease-in-out;
  -moz-transition: opacity .25s ease-in-out;
  -webkit-transition: opacity .25s ease-in-out;

和here's一个jsbin链接。任何帮助将不胜感激

Answer 1

如果您想要转换width，请使用transition: width（然后使用时间，功能等）

transition会转换您告诉它的任何属性，或者您可以使用关键字all来转换所有属性 - 但要谨慎使用！缩放时，Chrome的效果不是很好......

除此之外：你的边界半径代码可以简单得多：

border-radius: 8px 8px 20px 20px;

long 时间内不需要前缀。

CSS Transition无法正常工作

1 个答案: