javascript - Trouble getting CSS animation to work when AJAX call -

-

I am creating a website and when I first call the page, I can work with CSS animation, but I have to call every time the AJAX function is called. Here is the Javascript XML call that works 

  function XML (infoId) {var xmlHttp = xmlHttpObjCreate (); If (! XmlHttp) {Warning ("Browser does not support this operation."); Return; } XmlHttp.onreadystatechange = function () {if (xmlHttp.readyState == 4 & xmlHttp.status == 200} {elemObj = document.getElementById ('textbox'); ElemObj.innerHTML = xmlHttp.responseText; ElemObj.className = "bounceInUp"; }} // Which quotes we want var reqURL = "FILE_NAME_HERE_? InfoId =" + infoId; XmlHttp.open ("GET", reqURL, true); XmlHttp.send (); }

Here is an example call function

Here is the CSS animation code named "bounceInUp" 

  # Textbox {Width: 100%; Background color: transparent; Height: 200 pixels; Color: # 0000FF; font-weight: bold; Font-size: 22px; Overflow: Auto; Padding: 10; Webkit-Animation: Bounce Inline 1200 MMS Low-Out; -MOZ-ANIMATION: BOUNSINUPUP 1200 MMS CUM-OUT; -O-Animation: Bounce Out 1200 MMS Low-Out; Animation: Bouncing up 1200mms low-out; } @ -webkit-keyframe bounce up {0%, 60%, 75%, 90%, 100% {WebCat-transition-time-function: cubic bezier (0.215, 0.610, 0.355, 1.000); Transition-time-function: Cubic Bezier (0.215, 0.610, 0.355, 1.000); } 0% {Opacity: 0; -Widkkit-Conversion: Translation 3D (0, 3000px, 0); Conversion: Translation 3D (0, 3000px, 0); } 60% {Opacity: 1; Webkit-Conversions: Translation 3D (0, -20px, 0); Conversion: Translation 3D (0, -20px, 0); } 75% {-webkit-transform: translate3d (0, 10px, 0); Conversions: Translation 3D (0, 10px, 0); } 90% {-webkit-transform: translate3d (0, -5px, 0); Conversion: Translation 3D (0, -5px, 0); } 100% {-webkit-transform: translate3d (0, 0, 0); Conversion: Translation 3D (0, 0, 0); }} @ Keyframe bounce-up {0%, 60%, 75%, 90%, 100% {webkat-transition-time-function: cubic bezier (0.215, 0.610, 0.355, 1.000); Transition-time-function: Cubic Bezier (0.215, 0.610, 0.355, 1.000); } 0% {Opacity: 0; -Widkkit-Conversion: Translation 3D (0, 3000px, 0); Conversion: Translation 3D (0, 3000px, 0); } 60% {Opacity: 1; Webkit-Conversions: Translation 3D (0, -20px, 0); Conversion: Translation 3D (0, -20px, 0); } 75% {-webkit-transform: translate3d (0, 10px, 0); Conversions: Translation 3D (0, 10px, 0); } 90% {-webkit-transform: translate3d (0, -5px, 0); Conversion: Translation 3D (0, -5px, 0); } 100% {-webkit-transform: translate3d (0, 0, 0); Conversion: Translation 3D (0, 0, 0); }} .bounceInUp {-webkit-animation-name: bounceInUp; Animation-name: bounceline; }

I apologize for all the codes but I have to make sure that everything is here that somebody may need to help me, so CSS Animation only runs now When the page is not loaded when the XML function is called.

itemprop = "text">

It seems that you are already adding animation via the #textbox CSS selector. And your AJAX call adds the name of a class that contains the exact same animation property that already applies to the textbox via the # textbox rule.

To re-ignite your animation, I suspect you need to close your #textbox's animation css property before sending an AJAX call, your AJAX call will re-apply the animation. You can do it in different ways, create a separate class on top of my head which clears the animation and apply the classname to #textbox before your xmlHttp.send (), return the text box in that way The animation is reused in a non-animated position before the AJAX call goes to your success handler.

To make this simple, you want to remove the animation properties from the #textbox CSS rule and just apply and remove it .bounceInUp class name element when you want to run the animation . I think this is a cleaner approach.


Comments

Post a Comment

Popular posts from this blog

winforms - C# Form - Property Change -

-
I have a form that has a property named car A class with many properties. The Properties is being displayed on the current car on the basis of some user actions that are being displayed. So I have to know whether the property has been allocated or set to zero. I'm aware of INotifyPropertyChanged , but in my case I'm not sure that since this change I have changed my car properties car do not want to monitor the property. Any idea how to accomplish this? In advance thank you If you have created a true asset in your class then You should be a great and setter, you can add the code directly to the form property in order to take action on the basis of "form": Public partial category Form 1: form {public form 1 () {InitializeComponent (); } // define car square public class car {public string name = string. Empty; } // private car to keep the value of the current car private variable _car = null; // Property of public form which you can ru...
Read more

c# - NewtonSoft JArray - how to select multiple elements with LINQ -

-
Image
I have some Jason which I then parsed the Jerry object. I want to filter Jerere so that he has only two properties, title and bodytext. But whatever I try I can only select a value using LINQ [HttpGet] Public JsonResult AjaxGetNewsItems () {string json = JsonConvert.SerializeObject (news.GetNewsItems (), Formatting: formatting.Indented); Var v = Jairo Purse (jason); // arrow item = // v.Where (// X =>.! // X ["title"] ToString () = string.Empty & amp; //X ["BodyText"] ToString ()! = String.Empty) // Select (x = & gt; x ["title"]) // .toList (); Var title = (string) v [0] ["title"]; Var titleBodytext = v selectively v [0] ["title"] ["bodytext"]; Foreach (item in titleBodytext) {} // Title: Biodtext = // v [0] ["title"] ["BodyText"] by c // // Group c // new selection from c in gram // {}; // JArray a = JArray.FromObject (news.GetNewsItems ()); // string titlebodietext = (string) news item [...
Read more

javascript - amcharts makechart not working -

-
I am trying to create an amiratars serial chart on my Durandal single page application. This chart was working fine on Chrome browser but it is not working on IE. Can you please help me in this regard. Error while using Amcharts. The Macchart () method does not support the object in this object in IE.
Read more