通过条件属性实现单元格内容的闪烁效果
1. 描述
在报表制作过程中，有时为了突出满足一定条件的单元格效果，往往需要对其进行一些特效处理，比如添加单元格闪烁效果等，当我们遇到这样的需求时，该如何实现呢？
如图：
2. 思路
使用单元格条件属性新值：CONCATENATE("<div style='animation:twinkling .75s linear infinite'>" + $$$ + "</div>")，设置单元格用HTML显示内容，通过css设置单元格的闪烁效果。
3. 操作步骤
3.1 打开报表
打开 %FR_HOME%\WebReport\WEB-INF\reportlets\doc\Form\LineForm\LineForm.cpt 报表。
3.2 添加条件属性
1）右键J3单元格，选择条件属性，添加一个条件属性。
2）添加颜色属性，设置为红色：
3）添加新值属性，公式：CONCATENATE("<div style='animation:twinkling .75s linear infinite'>" + $$$ + "</div>")：
4）在条件属性的公式条件中，选择公式，输入公式：$$$ > 12，点击增加。
如图：
3.3 设置HTML显示内容
点击J3单元格，在右侧面板中选择单元格属性，选择其他，设置显示内容为用HTML显示内容：
3.4 添加自定义CSS样式
在工作目录下添加一个自定义css文件，比如T1.CSS。
如图：
css脚本如下：
@keyframes twinkling{
0%{
opacity:0; /*透明度为0*/
}
100%{
opacity:1; /*透明度为1*/
}
}
@-moz-keyframes twinkling {
/* Firefox */
0%{
opacity:0; /*透明度为0*/
}
100%{
opacity:1; /*透明度为1*/
}
}
@-webkit-keyframes twinkling{
/* Safari 和 Chrome */
0%{
opacity:0; /*透明度为0*/
}
100%{
opacity:1; /*透明度为1*/
}
}
@-o-keyframes twinkling {
/* Opera */
0%{
opacity:0; /*透明度为0*/
}
100%{
opacity:1; /*透明度为1*/
}
}
3.5 引入css文件
点击模板>模板Web属性>引用css，选中新建的css文件，点击增加。如图：
4. 预览效果
4.1 PC端预览效果
保存模板，预览报表，效果如下图所示。
4.2 移动端预览效果
注：不支持移动端。
5. 已完成模板
模板效果在线查看请点击：通过条件属性实现单元格内容的闪烁效果.cpt
已完成的模板，可参见：%FR_HOME%\WebReport\WEB-INF\reportlets\doc\JS\CSS样式\05-通过条件属性实现单元格内容的闪烁效果.cpt
附件列表
标签：
9.0验证
文档内容仅供参考，如果你需要获取更多帮助，付费/准付费客户请咨询帆软技术支持
关于技术问题，您还可以前往帆软社区，点击顶部搜索框旁边的提问按钮
若您还有其他非技术类问题，可以联系帆软传说哥（qq：1745114201）