将选择器样式作为脉冲动画应用于元素

【问题标题】：Applying a selectors style to an element as a pulse animation将选择器样式作为脉冲动画应用于元素
【发布时间】：2019-02-03 16:27:38
【问题描述】：

Kendo UI 为每个可用主题定义了一个 textbox:focus 样式：

.k-textbox:focus {
    box-shadow: 0 0 7px 0 #357ebd;
}

当字段带外更新时，我想将此样式作为动画（淡入/淡出）应用于文本框，以及该字段是否具有当前焦点。

我猜当接收到特定字段的更新时，我必须使用 javascript 和 jquery 来启动它。

Example

【问题讨论】：

尝试添加过渡到.k-textbox，例如.k-textbox { transition: box-shadow 0.1s linear; }.

标签： jquery css kendo-ui

【解决方案1】：

是的，触发器必须通过 JavaScript 发生。正如 daGUY 所指出的，过渡会产生效果。

这里是一个使用 jQuery 的例子：

$(".your-textbox-selector").on( "change", function() {

    $(this).css("box-shadow", "0 0 7px 0 #357ebd").css("transition", "box-shadow 0.1s linear");

})

【讨论】：

如何使用活动样式表中的“.k-textbox:focus”样式。 KendoUI 在不同的 CSS 文件中定义了许多颜色主题，我的特定应用程序允许用户切换主题，因此我不能对 box-shadow 颜色使用硬编码值。我用一个示例链接更新了我的问题。