实现表格行的闪烁效果

实现表格行的闪烁效果

想要实现点击一个a标签,通过ID跳转到相应的表格行,设计一个表格长这样的:

<div>
       <h2 id="aaa" class="page-header">表格测试</h2>
                <div class="table-responsive">
                    <table class="table table-striped table-hover">
                        <thead>
                        <tr>
                            <th>第一列</th>
                            <th>第二列</th>
                            <th>第三列</th>
                            <th>第四列</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr class="highlight" id="base">
                          <td class="asso-td"> <a>这是a</a>
                            </td>
                            <td class="asso-td">aaaa</td>
                            <td class="type-td">bbbb</td>
                            <td></td>
                        </tr>
                     </tbody>
                    </table>
         </div>
</div>

这里写图片描述

<tr class="highlight" id="base"></tr>

这里这一行的class定义成highlight,然后在style中定义样式

<head>
<style> 
.highlight
{
    -webkit-animation:myfirst 10s; /* Safari and Chrome */
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
            0% {
                background-color: white;
                color:#333;
            }
            50% {
                background-color: #449d44;
                color: white;
            }
            100% {
                background-color: white;
                color:#333;
}
</style>
</head>

@keyframes声明动画 myfirst是动画的名字。 这里我写的是适用于Chrome的@-webkit-keyframes,其他浏览器有不一样的声明。然后在highlight的类中绑定这个动画,animation是一个简写属性,这里简单定义了动画的持续时间,具体的六个属性如下表:

描述
animation-name规定需要绑定到选择器的 keyframe 名称。。
animation-duration规定完成动画所花费的时间,以秒或毫秒计。
animation-timing-function规定动画的速度曲线。
animation-delay规定在动画开始之前的延迟。
animation-iteration-count规定动画应该播放的次数。
animation-direction规定是否应该轮流反向播放动画。

实现的动画效果在50%的时候是这样的

这里写图片描述

发现有点小问题,a标签的字体没有变化,所以要给a标签也加上class=”highlight”,就可以实现效果了,这里忘记截图了。

在WPF(Windows Presentation Foundation)中,DataGridView是一种用于显示表格数据的用户界面控件。如果你想要实现单元格闪烁效果,通常是在某些操作(如数据更新、输入验证等)完成后,为了吸引用户注意力或者提供反馈而添加的一种视觉提示。这可以通过自定义`DataGridCellEditingEndingEventArgs`事件处理程序来实现。 以下是一个简单的示例,展示如何在编辑结束时让单元格闪烁: ```csharp private void dataGrid_CellEditingEnded(object sender, DataGridCellEditingEndedEventArgs e) { // 获取刚刚编辑过的单元格 DataGridCell editedCell = e.EditedItem as DataGridCell; if (editedCell != null) { // 设置焦点以便看到闪烁效果 editedCell.Focus(); // 定义动画持续时间和颜色变化 Duration animationDuration = new Duration(TimeSpan.FromMilliseconds(500)); SolidColorBrush cellColor = new SolidColorBrush(Color.FromArgb(255, 255, 0, 0)); // 红色 // 创建一个颜色切换动画 Storyboard storyboard = newStoryboard(); ColorAnimation colorAnimation = new ColorAnimation( Storyboard.TargetProperty = FrameworkElement.BackgroundProperty, From = editedCell.Background.Color, To = cellColor.Color, Duration = animationDuration); // 添加动画到故事板并开始播放 storyboard.Children.Add(colorAnimation); storyboard.Begin(e.UpdatedCells[0]); // 当动画结束后,恢复原始背景色 EventHandler completedHandler = null; completedHandler = delegate { editedCell.Background = editedCell.DefaultStyleProperties[BackgroundProperty]; }; storyboard.Completed += completedHandler; } }
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值