按钮上的CSS3动画点击

我试图在点击按钮时将css3动画添加到按钮。（我希望按钮放大，旋转，然后缩小，使其看起来像飞离屏幕。）如果我引用标记中调用它的类，我可以使动画起作用。但是，如果我尝试使用jquery附加css3类，则动画不会运行。我已经证实这个班正在通过Firebug进行连接，但我仍然没有收到任何动画。这是在.NET .aspx页面后面使用C＃代码。 CSS和标记低于：按钮上的CSS3动画点击

<%@ 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; 
    }

来源

2012-12-09 tuckerjt07

如果是提交表单...动画之前，你可能会得到重定向甚至可能发生。另外，请只显示*呈现*代码。查询前端问题并显示后端代码毫无意义。 *和*作为最后一点，您不需要在您的问题中包含所有供应商前缀 – ahren

这不是重定向，我还没有将重定向逻辑添加到按钮点击。我一直在等待，直到动画以我喜欢的方式执行为止，然后我将创建一个计时器函数以允许动画播放，然后提交表单。另外，你提到的代码和后端代码是什么意思？ – tuckerjt07

，因为这个问题与asp.net模板无关。如果你想让人们回答，不要给他们一些与问题无关的东西。 asp代码在html/js上下文中没有意义。 – mpm

所以这不完全是我想怎么处理它，但我得到了它的工作。我添加了一个事件的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 
}

来源

2012-12-09 17:47:18 tuckerjt07

按钮上的CSS3动画点击

回答

相关问题