按鈕上的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動畫點擊

回答

相關問題