Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]

Groups > comp.lang.javascript > #37745

Re: Two SUCESSIVE animations on the same element - how?

Show key headers only | View raw

Arno Welzel:

> Julio Di Egidio:
> 
>> On Sunday, 10 November 2019 04:00:32 UTC+1, Julio Di Egidio  wrote:
>>> On Sunday, 10 November 2019 00:55:12 UTC+1, Arno Welzel  wrote:
>>>> Julio Di Egidio:
>>>>> On Saturday, 9 November 2019 18:13:01 UTC+1, Michael Haufe (TNO)  wrote:
>>>> [...]
>>>>>> <https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/animationend_event>
>>>>>
>>>>> Oh great, you did find at least that out...
>>>>> Now go back and write some code
>>>>> that actually works.
>>>>
>>>> See here: <https://arnowelzel.de/samples/animation.html>
>>>>
>>>> Works for me in Firefox 70.0.1 and Vivaldi 2.9.1705.41.
>>>
>>> Cool, but does not work on Edge: if you won't beat me to it, I'll try and
>>> fix it later...
>>
>> Bah, looked promising at first sight, but after looking inside I am not even
>> sure what you are trying to demonstrate there: indeed most of the remarks I
>> gave to Mr Haufe apply here as well, except that he at least gave us the
>> courtesy of a code pen to play with.
> 
> I tried to demonstrate how to create an animtion which moves a box and
> how to implement an event handler which sets the content of the box to
> "FINISHED!" when the animation is finished.
> 
> And you need code pen to modify code? Don't you have your own code pen
> account? Well - here you go (slightly modified with the lower position
> moved from 410px to 210px):
> 
> <https://codepen.io/arnowelzel/pen/BaaPaaK>
> 
> Also my second exampe with two animations where the JavaScript event
> handler starts the second animation after the first has finished:
> 
> <https://codepen.io/arnowelzel/pen/yLLqLyz>
> 
>> Anyway, I'll fix it for Edge later, which is quite an issue in itself, that
>> you guys just won't write code that actually works on all (major) browsers:
>> and, I must guess, not even see the point...
> 
> If you're so brilliant then show the code for Edge.
> 
> BTW: You are aware that Edge will use Chromium in the near future?

Ok, got it.

It seems, Edge has problem with "position: absolute" as part of the
keyframe definition. I added this to the base style of the box and just
left the positions in the keyframe definitions.

Now with three animation sections played once after another and also in
Edge:

<https://codepen.io/arnowelzel/pen/yLLqLyz>

All other mentioned examples are fixed as well.


-- 
Arno Welzel
https://arnowelzel.de

Back to comp.lang.javascript | Previous | Next — Previous in thread | Next in thread | Find similar | Unroll thread

Thread

Two SUCESSIVE animations on the same element - how? groovee@cyberdude.com - 2019-11-03 23:17 -0800
  Re: Two SUCESSIVE animations on the same element - how? "Michael Haufe (TNO)" <tno@thenewobjective.com> - 2019-11-04 13:07 -0800
    Re: Two SUCESSIVE animations on the same element - how? groovee@cyberdude.com - 2019-11-06 01:53 -0800
      Re: Two SUCESSIVE animations on the same element - how? "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2019-11-06 11:47 +0100
        Re: Two SUCESSIVE animations on the same element - how? groovee@cyberdude.com - 2019-11-07 09:07 -0800
          Re: Two SUCESSIVE animations on the same element - how? "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2019-11-08 00:25 +0100
          Re: Two SUCESSIVE animations on the same element - how? Arno Welzel <usenet@arnowelzel.de> - 2019-11-10 01:11 +0100
            Re: Two SUCESSIVE animations on the same element - how? "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2019-11-11 14:19 +0100
      Re: Two SUCESSIVE animations on the same element - how? Julio Di Egidio <julio@diegidio.name> - 2019-11-07 11:00 -0800
        Re: Two SUCESSIVE animations on the same element - how? "Michael Haufe (TNO)" <tno@thenewobjective.com> - 2019-11-07 16:46 -0800
          Re: Two SUCESSIVE animations on the same element - how? Julio Di Egidio <julio@diegidio.name> - 2019-11-07 22:57 -0800
            Re: Two SUCESSIVE animations on the same element - how? "Michael Haufe (TNO)" <tno@thenewobjective.com> - 2019-11-08 04:21 -0800
              Re: Two SUCESSIVE animations on the same element - how? Julio Di Egidio <julio@diegidio.name> - 2019-11-08 09:08 -0800
                Re: Two SUCESSIVE animations on the same element - how? "Michael Haufe (TNO)" <tno@thenewobjective.com> - 2019-11-08 10:34 -0800
                Re: Two SUCESSIVE animations on the same element - how? Julio Di Egidio <julio@diegidio.name> - 2019-11-09 01:44 -0800
                Re: Two SUCESSIVE animations on the same element - how? Julio Di Egidio <julio@diegidio.name> - 2019-11-09 02:02 -0800
                Re: Two SUCESSIVE animations on the same element - how? John G Harris <niam@jghnorth.org.uk.invalid> - 2019-11-09 11:55 +0000
                Re: Two SUCESSIVE animations on the same element - how? Julio Di Egidio <julio@diegidio.name> - 2019-11-09 05:39 -0800
                Re: Two SUCESSIVE animations on the same element - how? Julio Di Egidio <julio@diegidio.name> - 2019-11-09 05:32 -0800
  Re: Two SUCESSIVE animations on the same element - how? groovee@cyberdude.com - 2019-11-09 05:01 -0800
    Re: Two SUCESSIVE animations on the same element - how? Julio Di Egidio <julio@diegidio.name> - 2019-11-09 05:45 -0800
      Re: Two SUCESSIVE animations on the same element - how? "Michael Haufe (TNO)" <tno@thenewobjective.com> - 2019-11-09 09:12 -0800
        Re: Two SUCESSIVE animations on the same element - how? Julio Di Egidio <julio@diegidio.name> - 2019-11-09 13:53 -0800
          Re: Two SUCESSIVE animations on the same element - how? Arno Welzel <usenet@arnowelzel.de> - 2019-11-10 00:55 +0100
            Re: Two SUCESSIVE animations on the same element - how? Julio Di Egidio <julio@diegidio.name> - 2019-11-09 19:00 -0800
              Re: Two SUCESSIVE animations on the same element - how? Julio Di Egidio <julio@diegidio.name> - 2019-11-09 21:09 -0800
                Re: Two SUCESSIVE animations on the same element - how? Arno Welzel <usenet@arnowelzel.de> - 2019-11-10 11:10 +0100
                Re: Two SUCESSIVE animations on the same element - how? Arno Welzel <usenet@arnowelzel.de> - 2019-11-10 11:29 +0100
              Re: Two SUCESSIVE animations on the same element - how? Arno Welzel <usenet@arnowelzel.de> - 2019-11-10 11:35 +0100
    Re: Two SUCESSIVE animations on the same element - how? "Michael Haufe (TNO)" <tno@thenewobjective.com> - 2019-11-09 09:10 -0800
  Re: Two SUCESSIVE animations on the same element - how? Arno Welzel <usenet@arnowelzel.de> - 2019-11-10 00:51 +0100
    Re: Two SUCESSIVE animations on the same element - how? Arno Welzel <usenet@arnowelzel.de> - 2019-11-10 01:05 +0100
      Re: Two SUCESSIVE animations on the same element - how? Arno Welzel <usenet@arnowelzel.de> - 2019-11-12 12:00 +0100

csiph-web