堆栈内存溢出
  繁体   English   中英

CSS3动画按钮点击

[英]CSS3 Animation on Button Click

 原文  2012-12-09 04:23:53  4   1    jquery/ html/ css/ html5/ css3

问题描述

我试图在单击按钮时将css3动画添加到按钮。 （我希望按钮放大，旋转然后再缩小，以使其看起来好像在屏幕上飞舞。）如果我引用了在标记中调用它的类，则可以使动画工作。 但是，如果尝试使用jquery附加css3类，则动画将无法运行。 我已经验证了该类是通过Firebug附加的，但是我仍然没有得到任何动画。 这是在.NET .aspx页上，后面使用C＃代码。 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;
   }

1 个解决方案

解决方案1
 0 已采纳  2012-12-09 17:47:18

因此，这并不是我想要的确切方式，但是我让它工作了。 我向图像按钮添加了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
}

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 单击时反转CSS3动画 单击 jQuery 和 CSS3 圆角动画 使用CSS3实施Windows 8 Tile“ Click”动画 单击按钮即可获得CSS动画 按钮单击启动css动画 如何在点击时重复css3动画？ 使用JQuery的CSS3动画触发器单击其他元素 css3动画不以jquery click事件开头 悬停时的css3动画 jQuery CSS3动画
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM