Skip to content

Commit

Permalink
[css-transitions-1] Define before/after-change style in terms of base
Browse files Browse the repository at this point in the history
 - Introduce "base style".
 - Define before/after-change style in terms of that base style
   (at two different points in time).
 - There should be no need for the "completed transition" set anymore,
   since the before/after-change styles on a child are blind to any
   effects from transitions/animations happening on the parent.
  • Loading branch information
Anders Hartvoll Ruud committed Sep 27, 2021
1 parent cd7a52b commit 1451af1
Showing 1 changed file with 13 additions and 93 deletions.
106 changes: 13 additions & 93 deletions css-transitions-1/Overview.bs
Original file line number Diff line number Diff line change
Expand Up @@ -432,54 +432,6 @@ Starting of transitions {#starting}
</span>
</p>

<p>
Implementations must also maintain a set of
<dfn export lt="completed transition">completed transitions</dfn>,
each of which
(like <a>running transitions</a>)
applies to a specific element and non-shorthand property.
<span class="note">
This specification maintains the invariant that
there is never both a <a>running transition</a> and
a <a>completed transition</a> for the same property and element.
</span>
</p>

<p>
If an element is no longer in the document,
implementations must <a>cancel</a> any <a>running transitions</a>
on it and remove transitions on it from the
<a>completed transitions</a>.
</p>

<div class="note">

<p>
This set of completed transitions
needs to be maintained
in order to prevent
transitions from repeating themselves in certain cases,
i.e., to maintain the invariant
that this specification tries to maintain
that unrelated style changes do not trigger transitions.
</p>

<p class="example">
An example where maintaining the set of completed transitions
is necessary would be a transition on
an inherited property,
where the parent specifies a transition of that property for
a longer duration (say, ''transition: 4s text-indent'')
and a child element that inherits the parent's value specifies
a transition of the same property for a shorter duration
(say, ''transition: 1s text-indent'').
Without the maintenance of this set of completed transitions,
implementations could start additional transitions on the child
after the initial 1 second transition on the child completes.
</p>

</div>

<p>
Various things can cause the <a>computed values</a> of properties
on an element to change.
Expand Down Expand Up @@ -540,26 +492,15 @@ Starting of transitions {#starting}
then transitions are not started for that element
in that style change event.
Otherwise,
define the <dfn export>base style</dfn> as
the <a>computed values</a> of all properties on the element
as they would be without any declarations added to the
"Animation" or "Transition" [[css-cascade-3#cascading-origins|origins]],
inheriting from the base style of the parent;
define the <dfn export>before-change style</dfn> as
the <a>computed values</a> of all properties on the element as of
the previous <a>style change event</a>,
except with any styles derived from declarative
animations such as CSS Transitions, CSS Animations
([[CSS3-ANIMATIONS]]),
and SMIL Animations ([[SMIL-ANIMATION]], [[SVG11]])
updated to the current time.
Likewise, define the <dfn export>after-change style</dfn> as
the <a>computed values</a> of all properties
on the element based on the information
known at the start of that <a>style change event</a>,
but using the computed values of the 'animation-*' properties from the
<a>before-change style</a>,
excluding any styles from CSS Transitions in the computation,
and inheriting from
the <a>after-change style</a> of the parent.
Note that this means the <a>after-change style</a> does not differ from
the <a>before-change style</a> due to newly created or canceled CSS
Animations.
the <a>base style</> as of the previous <a>style change event</a>; and
define the <dfn export>after-change style</dfn> as
the <a>base style</> as of the current <a>style change event</a>.
</p>

<div class="note">
Expand Down Expand Up @@ -652,12 +593,6 @@ Starting of transitions {#starting}
the <a>after-change style</a> for that property,
and the values for the property are [=transitionable=],
</li>
<li>
the element does not have a <a>completed transition</a>
for the property
or the <a>end value</a> of the <a>completed transition</a>
is different from the <a>after-change style</a> for the property,
</li>
<li>
there is a <a>matching transition-property value</a>, and
</li>
Expand All @@ -666,8 +601,6 @@ Starting of transitions {#starting}
</li>
</ul>
then implementations must
remove the <a>completed transition</a> (if present) from the set
of completed transitions and
start a transition whose:
<ul>
<li>
Expand Down Expand Up @@ -699,23 +632,11 @@ Starting of transitions {#starting}
</ul>
</li>
<li>
Otherwise,
if the element has a <a>completed transition</a> for the property
and the <a>end value</a> of the <a>completed transition</a>
is different from the <a>after-change style</a> for the property,
then implementations must
remove the <a>completed transition</a> from the set of
<a>completed transitions</a>.
</li>
<li>
If the element has a <a>running transition</a> or
<a>completed transition</a> for the property,
If the element has a <a>running transition</a> for the property,
and there is <strong>not</strong>
a <a>matching transition-property value</a>,
then implementations must
<a>cancel</a> the <a>running transition</a>
or remove the <a>completed transition</a> from the set of
<a>completed transitions</a>.
<a>cancel</a> the <a>running transition</a>.
</li>
<li>
If the element has a <a>running transition</a> for the property,
Expand Down Expand Up @@ -1060,15 +981,14 @@ Completion of transitions {#complete}
but prior to the first <a>style change event</a>
whose time is equal to or after their <a>end time</a>.
When a transition completes,
implementations must move
implementations must remove
all transitions that complete at that time
from the set of <a>running transitions</a>
to the set of <a>completed transitions</a>
and then fire the <a href="#transition-events">events</a>
for those completions.
<span class="note">(Note that doing otherwise, that is,
firing some of the events before doing all of the moving
from <a>running transitions</a> to <a>completed transitions</a>,
firing some of the events before removing all completed transitions
from <a>running transitions</a>
could allow
a style change event to happen
without the necessary transitions completing,
Expand Down

0 comments on commit 1451af1

Please sign in to comment.