我正在尝试在单击按钮时向按钮添加 css3 动画。 (我希望按钮放大、旋转然后缩小，这样它看起来就像飞出屏幕一样。)如果我在标记中引用调用它的类，我就可以使动画工作。但是，如果我尝试使用 jquery 附加 css3 类，则动画不会运行。我已经验证该类是通过 Firebug 附加的，但我仍然没有得到任何动画。这是在使用 C# 代码的 .NET .aspx 页面上。 CSS 和标记如下:
<%@ Page Title="About Us" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
CodeBehind="Contact.aspx.cs" Inherits="MirandasWebsite.About" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
<title>Contact Miranda</title>
<script>
$(document).ready(function() {
$("#MainContent_imgbtnSendEmail").click(function() { // this is your event
$("#MainContent_imgbtnSendEmail").addClass("rotate"); // here your adding the new class
)};
)};
</script>
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</asp:ToolkitScriptManager>
<asp:UpdatePanel ID="upEmail" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<div id="ContactPage">
<asp:Panel ID="pnlFacebook" runat="server" Visible="true">
<div id="Facebook">
<div id="dFacebook" runat="server" class="zoom">
<asp:HyperLink ID="hlFacebook" runat="server" Text="My Facebook"> </asp:HyperLink>
</div>
</asp:Panel>
<asp:Panel ID="pnlPhone" runat="server">
<br />
<div id="lblPhone">
<p>You may reach me at this number:</p>
<span id="Phone" runat="server">
</span>
</div>
</asp:Panel>
<asp:Panel ID="pnlSendEmail" runat="server" Visible="true">
<br />
<table id="ContactTable">
<tr>
<td>
<asp:Label ID="lblSubject" runat="server" Text="Message Subject"></asp:Label>
</td>
</tr>
<tr>
<td>
<asp:TextBox ID="txtSubject" runat="server" Width="20%"></asp:TextBox>
<asp:TextBoxWatermarkExtender ID="tbwSubject" runat="server" TargetControlID="txtSubject"
WatermarkText="Enter Message Subject Here">
</asp:TextBoxWatermarkExtender>
<asp:RequiredFieldValidator ID="reqSubject" runat="server" ControlToValidate="txtSubject"
Text="**" ErrorMessage="A Message Subject is Required." Display="Static" CssClass="Validation"></asp:RequiredFieldValidator>
</td>
</tr>
<tr>
<td>
<asp:Label ID="lblFrom" runat="server" Text="Your Email Address"></asp:Label>
</td>
</tr>
<tr>
<td>
<asp:TextBox ID="txtFrom" runat="server" Width="20%"></asp:TextBox>
<asp:TextBoxWatermarkExtender ID="tbwFrom" runat="server" TargetControlID="txtFrom"
WatermarkText="Enter Your Email Address Here">
</asp:TextBoxWatermarkExtender>
<asp:RequiredFieldValidator ID="reqFrom" runat="server" ControlToValidate="txtFrom"
Text="*" ErrorMessage="A Valid Email Address is Required." Display="Static" CssClass="Validation"></asp:RequiredFieldValidator>
<asp:RegularExpressionValidator ID="regexEmailAddress" runat="server" ControlToValidate="txtFrom"
ErrorMessage="A Valid Email Address is Required" ValidationExpression="^([a-zA-Z0-9_\-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([a-zA-Z0-9\-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$"
Display="Static" Text="*" CssClass="Validation"></asp:RegularExpressionValidator>
</td>
</tr>
<tr>
<td>
<asp:Label ID="lblBody" runat="server" Text="Message Body"></asp:Label>
</td>
</tr>
<tr>
<td>
<asp:TextBox ID="txtBody" runat="server" TextMode="MultiLine" Rows="25" Width="40%"></asp:TextBox>
<asp:TextBoxWatermarkExtender ID="tbwBody" runat="server" TargetControlID="txtBody"
WatermarkText="Message Body Goes Here">
</asp:TextBoxWatermarkExtender>
<asp:RequiredFieldValidator ID="reqBody" runat="server" ControlToValidate="txtBody"
ErrorMessage="A Message Body is Required." Display="Static" Text="**" CssClass="Validation"></asp:RequiredFieldValidator>
</td>
</tr>
<tr>
<td>
<%--<div id="SendEmail" runat="server" class="zoom"><asp:Button ID="btnSendEmail" runat="server" Text="Send" OnClick="btnSendEmail_Click" /></div>--%>
<div id="SendEmail" runat="server" class="zoom">
<asp:ImageButton ID="imgbtnSendEmail" runat="server" OnClick="btnSendEmail_Click"
ImageUrl="SiteImages/Mail-icon.png" /></div>
</td>
</tr>
<asp:ValidationSummary runat="server" ID="validationSummary" ShowMessageBox="true"
ShowSummary="false" />
</table>
</asp:Panel>
<asp:Panel ID="pnlEmailSuccess" runat="server" Visible="false">
<div id="MessageSuccess">
<h2>
The Email was Sent Successfully</h2>
<p>
Thank You for Your Interest</p>
</div>
</asp:Panel>
</div>
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdateProgress ID="upprogRegister" runat="server">
<ProgressTemplate>
<div id="blurred">
<img src="SiteImages/ajax-loader.gif" id="blurredimage" runat="server" />
</div>
</ProgressTemplate>
</asp:UpdateProgress>
<asp:AlwaysVisibleControlExtender ID="aveProgressRegister" runat="server" TargetControlID="upprogRegister"
HorizontalSide="Center" VerticalSide="Middle" UseAnimation="true">
</asp:AlwaysVisibleControlExtender>
</asp:Content>
CSS:
@-webkit-keyframes rotater {
0% { transform:rotate(0) scale(1) }
10% { transform:rotate(90deg) scale(1.5) }
20% { transform:rotate(180deg) scale(2) }
30% { transform:rotate(270deg) scale(2.5) }
40% { transform:rotate(360deg) scale(3) }
50% { transform:rotate(450deg) scale(2.5) }
60% { transform:rotate(540deg) scale(2) }
70% { transform:rotate(630deg) scale(1.5) }
80% { transform:rotate(720deg) scale(1) }
90% { transform:rotate(810deg) scale(.5) }
100% { transform:rotate(900deg) scale(0) }
}
@-moz-keyframes rotater {
0% { transform:rotate(0) scale(1) }
10% { transform:rotate(90deg) scale(1.5) }
20% { transform:rotate(180deg) scale(2) }
30% { transform:rotate(270deg) scale(2.5) }
40% { transform:rotate(360deg) scale(3) }
50% { transform:rotate(450deg) scale(2.5) }
60% { transform:rotate(540deg) scale(2) }
70% { transform:rotate(630deg) scale(1.5) }
80% { transform:rotate(720deg) scale(1) }
90% { transform:rotate(810deg) scale(.5) }
100% { transform:rotate(900deg) scale(0) }
}
@-o-keyframes rotater {
0% { transform:rotate(0) scale(1) }
10% { transform:rotate(90deg) scale(1.5) }
20% { transform:rotate(180deg) scale(2) }
30% { transform:rotate(270deg) scale(2.5) }
40% { transform:rotate(360deg) scale(3) }
50% { transform:rotate(450deg) scale(2.5) }
60% { transform:rotate(540deg) scale(2) }
70% { transform:rotate(630deg) scale(1.5) }
80% { transform:rotate(720deg) scale(1) }
90% { transform:rotate(810deg) scale(.5) }
100% { transform:rotate(900deg) scale(0) }
}
@-ms-keyframes rotater {
0% { transform:rotate(0) scale(1) }
10% { transform:rotate(90deg) scale(1.5) }
20% { transform:rotate(180deg) scale(2) }
30% { transform:rotate(270deg) scale(2.5) }
40% { transform:rotate(360deg) scale(3) }
50% { transform:rotate(450deg) scale(2.5) }
60% { transform:rotate(540deg) scale(2) }
70% { transform:rotate(630deg) scale(1.5) }
80% { transform:rotate(720deg) scale(1) }
90% { transform:rotate(810deg) scale(.5) }
100% { transform:rotate(900deg) scale(0) }
}
@keyframes rotater {
0% { transform:rotate(0) scale(1) }
10% { transform:rotate(90deg) scale(1.5) }
20% { transform:rotate(180deg) scale(2) }
30% { transform:rotate(270deg) scale(2.5) }
40% { transform:rotate(360deg) scale(3) }
50% { transform:rotate(450deg) scale(2.5) }
60% { transform:rotate(540deg) scale(2) }
70% { transform:rotate(630deg) scale(1.5) }
80% { transform:rotate(720deg) scale(1) }
90% { transform:rotate(810deg) scale(.5) }
100% { transform:rotate(900deg) scale(0) }
}
.rotate
{
-webkit-animation-name: rotater;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: infinite;
-webkit-animation-duration: 1s;
-moz-animation-name: rotater;
-moz-animation-timing-function: ease-in-out;
-moz-animation-iteration-count: infinite;
-moz-animation-duration: 1s;
-o-animation-name: rotater;
-o-animation-timing-function: ease-in-out;
-o-animation-iteration-count: infinite;
-o-animation-duration: 1s;
animation-name: rotater;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 1s;
}
最佳答案
所以这并不是我想要的处理方式，但我让它工作了。我向图像按钮添加了一个 OnClientClick 事件，如下所示:
<asp:ImageButton ID="imgbtnSendEmail" runat="server" OnClientClick="javascript:addSendAnimation()" OnClick="btnSendEmail_Click"
ImageUrl="SiteImages/Mail-icon.png" /></div>
然后像这样创建两个 JS 函数:
function addClassName(inElement, inClassName) {
if (!hasClassName(inElement, inClassName))
inElement.className = [inElement.className, inClassName].join(' ');
}
function addSendAnimation() {
var button = document.getElementById('MainContent_imgbtnSendEmail');
addClassName(button, 'rotate');
alert(button + " was clicked"); //This is used for debugging and should be removed before the site goes live
}
关于jquery - 单击按钮时的 CSS3 动画，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13784629/