通过条件属性实现单元格内容的闪烁效果

1. 描述
1.1 问题描述

在报表制作过程中，有时为了突出满足一定条件的单元格效果，往往需要对其进行一些特效处理，比如添加单元格闪烁效果等，当我们遇到这样的需求时，该如何实现呢？

如下图所示：

1.2 解决思路

使用单元格条件属性新值：CONCATENATE("<div style='animation:twinkling .75s linear infinite'>" + $$$ + "</div>")，设置单元格用 HTML 显示内容，通过 CSS 设置单元格的闪烁效果。

2. 操作步骤
2.1 打开报表

打开 %FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\Form\LineForm\LineForm.cpt 报表。

2.2 添加条件属性

1）右键 J3 单元格，选择条件属性，添加一个条件属性。

2）添加颜色属性，设置为红色：

3）添加新值属性，公式：CONCATENATE("<div style='animation:twinkling .75s linear infinite'>" + $$$ + "</div>")：

4）在条件属性的公式条件中，选择公式，输入公式：$$$ > 12，点击增加。

如图：

2.3 设置 HTML 显示内容

点击 J3 单元格，在右侧面板中选择单元格属性，选择其他，设置显示内容为用 HTML 显示内容：

2.4 添加自定义 CSS 样式  

在工作目录下添加一个自定义 CSS 文件，比如 T1.css。如下图所示：

点击下载 T1.css：T1.css

CSS 脚本如下：

1. @keyframes twinkling{
   
2. 0%{  
   
3.         opacity:0;            /*透明度为0*/  
   
4.     }  
   
5. 100%{  
   
6.         opacity:1;              /*透明度为1*/  
   
7.     }
   
8. }
   
9. @-moz-keyframes twinkling {
   
10. /* Firefox */
    
11. 0%{  
    
12.         opacity:0;            /*透明度为0*/  
    
13.     }  
    
14. 100%{  
    
15.         opacity:1;              /*透明度为1*/  
    
16.     }
    
17. }
    
18. @-webkit-keyframes twinkling{
    
19. /* Safari 和 Chrome */
    
20. 0%{  
    
21.         opacity:0;            /*透明度为0*/  
    
22.   }  
    
23. 100%{  
    
24.         opacity:1;              /*透明度为1*/  
    
25.     }
    
26. }
    
27. @-o-keyframes twinkling {
    
28. /* Opera */
    
29. 0%{  
    
30.         opacity:0;            /*透明度为0*/  
    
31.   }  
    
32. 100%{  
    
33.         opacity:1;              /*透明度为1*/  
    
34.     }
    
35. }

复制代码

2.5 引入 CSS 文件

点击模板>模板 Web 属性>引用 CSS，选中新建的 CSS 文件，点击增加。如下图所示：

3. 预览效果3.1 PC 端

保存模板，预览报表，效果如下图所示。

3.2 移动端预览效果

注：不支持移动端。

4. 已完成模板

已完成的模板，可参见：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\CSS样式\05-通过条件属性实现单元格内容的闪烁效果.cpt

点击下载模板：05-通过条件属性实现单元格内容的闪烁效果.cpt，下载见底部附件

点击下载 CSS 文件：T1.css，下载见底部附件