2回答

Lyn

2016-08-03

已采纳

H5ComponentPolyline.css

.h5_component_polyline .text{
    -webkit-transition:all 1s 1.5s; /* <<<---- 这行定义了动画过程1s，延迟 1.5s 出现 */
    -webkit-opacity: 0;             /* <<<---- 这行定义了默认是透明度为0 */
}

.h5_component_polyline_load .text{
    -webkit-opacity: 1;           /* <<<---- 这行定义了，polyline 载入后透明度为1，但是因为有动画效果 transition:all 1s 所以会缓缓出现 */
}
.h5_component_polyline_leave .text{
    -webkit-opacity: 0;
}

然后是你的思路，需要每个项目文本「间隔出现」，按我理解只要每个 .text  的 delay 间隔不一样就好了。

H5ComponentPolyline.js :42行

   for(var i=0;i<step+1;i++){
      var x = (w/step)*i+1;
      ctx.moveTo(x,0);
      ctx.lineTo(x,h);

      if( cfg.data[i]){
        var text = $('<div class="text">'); // <<-- 我们可以在这里加 CSS 设置延迟
        text.text( cfg.data[i][0] );
        text.css('width',text_w/2)
        .css('left',(x/2 - text_w/4) + text_w/2 );

        component.append(text);
      }
  }

比如修改为

var sec = 1.5 + i*.5;
var text = $('<div class="text" style="-webkit-transition:all 1s '+sec+'s">');

3

2

celestialSigh

老师，我也是这么实现的，但是似乎只有第一次有效果，之后的 点击，项目名都会立即出现

2017-01-23

共2条回复

Lyn

2017-01-26

q上、或者群里找下我

0

0