upon reaching the conclusion of the animation without employing the .animate() method

Question

upon reaching the conclusion of the animation without employing the .animate() method

I'm currently working on developing an iPad web application. The .animate() method doesn't meet the necessary speed requirements, so I've opted to utilize CSS for most of my transitions. How can I go about implementing

html

<div id="myGallery" class="container"></div>

css

.container {
position: fixed;
-webkit-transition: -webkit-transform 0.25s ease-in-out;
}

.pos-1 {
-webkit-transform:translate3d(0px,0px,0px);
}

.pos-2 {
-webkit-transform:translate3d(100px,0px,0px);
}
.pos-3 {
-webkit-transform:translate3d(200px,0px,0px);
}

js

$("#myGallery").removeClass("pos-" + this.previousId).addClass("pos-" + this.currentId);

$("#myGallery").bind("webkitAnimationEnd", function() {
        // this.style.webkitAnimationName = "";
        console.log("done animating");
    });

How can "webkitAnimationEnd" be effectively used to trigger the message "done animating" without relying on the .animate() method?

jquery css ipad

Answer 1

Answer №1

Is it possible to simply switch the element's class from one with animation to one without?

Am I interpreting the query incorrectly?

Are you asking for something different? Do you need to track when the CSS animation completes? One way could be by setting a timer and predicting the duration of the animation beforehand.

Answer 2

Is it possible to simply switch the element's class from one with animation to one without?

Am I interpreting the query incorrectly?

Are you asking for something different? Do you need to track when the CSS animation completes? One way could be by setting a timer and predicting the duration of the animation beforehand.

Answer 3

Answer №2

position:fixed does not function correctly in iOS Safari; it behaves like absolute positioning. It is recommended to avoid using this property on iOS devices going forward.
You can achieve the same effect using CSS3 alone by utilizing the steps() method.

Avoid relying on JavaScript or jQuery for animations in iOS as they may not yield optimal results.

Check out my code snippet with pure CSS animation on this JSFiddle link.

CSS:

@keyframes pos1{
    from{transform:translateX(200px)}
    to{transform:translateX(0)}
}
@keyframes pos2{
    from{transform:translateX(0)}
    to{transform:translateX(100px)}
}
@keyframes pos3{
    from{transform:translateX(100px)}
    to{transform:translateX(200px)}
}

.container {
    width:100px;
    height:100px;
    border:1px solid gray;
    transform:translateX(200px)
}
.pos1{
  animation-name: pos1;
  animation-duration: 0.25s;
  animation-direction: alternate;
  animation-timing-function: ease-out;
  animation-iteration-count: 1;

  transform:translateX(0)
}

.pos2{
  animation-name: pos2;
  animation-duration: 0.25s;
  animation-direction: alternate;
  animation-timing-function: ease-out;
  animation-iteration-count: 1;

  transform:translateX(100px)
}

.pos3{
  animation-name: pos3;
  animation-duration: 0.25s;
  animation-direction: alternate;
  animation-timing-function: ease-out;
  animation-iteration-count: 1;

  transform:translateX(200px)
}

Javascript

$('#p1').click(function(){
  $('#myGallery').removeClass('pos1, pos2, pos3').addClass('pos1');
});
$('#p2').click(function(){
  $('#myGallery').removeClass('pos1, pos2, pos3').addClass('pos2');
});
$('#p3').click(function(){
  $('#myGallery').removeClass('pos1, pos2, pos3').addClass('pos3');
});

HTML

<div id="myGallery" class="container"></div>
<input type="button" value="pos1"  id="p1"/>
<input type="button" value="pos2"  id="p2"/>
<input type="button" value="pos3"  id="p3"/>

Answer 4

position:fixed does not function correctly in iOS Safari; it behaves like absolute positioning. It is recommended to avoid using this property on iOS devices going forward.
You can achieve the same effect using CSS3 alone by utilizing the steps() method.

Avoid relying on JavaScript or jQuery for animations in iOS as they may not yield optimal results.

Check out my code snippet with pure CSS animation on this JSFiddle link.

CSS:

@keyframes pos1{
    from{transform:translateX(200px)}
    to{transform:translateX(0)}
}
@keyframes pos2{
    from{transform:translateX(0)}
    to{transform:translateX(100px)}
}
@keyframes pos3{
    from{transform:translateX(100px)}
    to{transform:translateX(200px)}
}

.container {
    width:100px;
    height:100px;
    border:1px solid gray;
    transform:translateX(200px)
}
.pos1{
  animation-name: pos1;
  animation-duration: 0.25s;
  animation-direction: alternate;
  animation-timing-function: ease-out;
  animation-iteration-count: 1;

  transform:translateX(0)
}

.pos2{
  animation-name: pos2;
  animation-duration: 0.25s;
  animation-direction: alternate;
  animation-timing-function: ease-out;
  animation-iteration-count: 1;

  transform:translateX(100px)
}

.pos3{
  animation-name: pos3;
  animation-duration: 0.25s;
  animation-direction: alternate;
  animation-timing-function: ease-out;
  animation-iteration-count: 1;

  transform:translateX(200px)
}

Javascript

$('#p1').click(function(){
  $('#myGallery').removeClass('pos1, pos2, pos3').addClass('pos1');
});
$('#p2').click(function(){
  $('#myGallery').removeClass('pos1, pos2, pos3').addClass('pos2');
});
$('#p3').click(function(){
  $('#myGallery').removeClass('pos1, pos2, pos3').addClass('pos3');
});

HTML

<div id="myGallery" class="container"></div>
<input type="button" value="pos1"  id="p1"/>
<input type="button" value="pos2"  id="p2"/>
<input type="button" value="pos3"  id="p3"/>

upon reaching the conclusion of the animation without employing the .animate() method

Answer №1

Answer №2

Similar questions

Troubleshooting CSS3 Media Queries in Notepad++

Limit the radius to only apply on big screens using tailwind css

Ensure the sum is recalculated whenever the input changes by using the jQuery change event

What's the deal with this loading GIF layout problem?

"Even rows are the only ones being highlighted on the table

Encountered a snag with submitting data via AJAX: received an error message stating

The daterangepicker reigns supreme above all other elements

Sending data from Ajax to PHP

Having trouble setting the selected option in Jquery by value?

Is it advisable for postcss plugins to list postcss as a peer dependency?

Using jQuery to alter the background position of multiple backgrounds in CSS

Choose a textarea in a generic manner

When a page becomes unresponsive due to an overload of DOM elements in a list, causing tabs to freeze

What is the best way to extract data for the x-axis and track the frequency of occurrences for the y-axis using crossfilter in JavaScript

Ways in which AngularJS and JQuery can be utilized

Guide on creating a menu that remains open continuously through mouse hovering until the user chooses an option from the menu

Retrieve the values of the rows that have been selected in the Kartik GridView located within a modal, and then transfer

What could be causing the disappearance of my <Div> when applying a Class to the contained <span>?

Error message: "PHP encounters an issue with jQuery due to absence of 'Access-Control-Allow-Origin' header"

Learn how to smoothly scroll to the top of a div by clicking on a team name