f1fe3e313e
When transitions re-start (when a css class is toggled for instance), new AnimationPlayer objects are created everytime. But now (since bug 1122414) names are given for AnimationPlayers that correspond to transitions, and so we can use that to know when a transition re-starts on a node and therefore send the correct events to the animation-panel.
156 lines
2.7 KiB
HTML
156 lines
2.7 KiB
HTML
<!DOCTYPE html>
|
|
<style>
|
|
.not-animated {
|
|
display: inline-block;
|
|
|
|
width: 50px;
|
|
height: 50px;
|
|
border-radius: 50%;
|
|
background: #eee;
|
|
}
|
|
|
|
.simple-animation {
|
|
display: inline-block;
|
|
|
|
width: 50px;
|
|
height: 50px;
|
|
border-radius: 50%;
|
|
background: red;
|
|
|
|
animation: move 2s infinite;
|
|
}
|
|
|
|
.multiple-animations {
|
|
display: inline-block;
|
|
|
|
width: 50px;
|
|
height: 50px;
|
|
border-radius: 50%;
|
|
background: #eee;
|
|
|
|
animation: move 2s infinite, glow 1s 5;
|
|
}
|
|
|
|
.transition {
|
|
display: inline-block;
|
|
|
|
width: 50px;
|
|
height: 50px;
|
|
border-radius: 50%;
|
|
background: #f06;
|
|
|
|
transition: width 5s;
|
|
}
|
|
.transition.get-round {
|
|
width: 200px;
|
|
}
|
|
|
|
.short-animation {
|
|
display: inline-block;
|
|
|
|
width: 50px;
|
|
height: 50px;
|
|
border-radius: 50%;
|
|
background: purple;
|
|
|
|
animation: move 1s;
|
|
}
|
|
|
|
.delayed-animation {
|
|
display: inline-block;
|
|
|
|
width: 50px;
|
|
height: 50px;
|
|
border-radius: 50%;
|
|
background: rebeccapurple;
|
|
|
|
animation: move 2s 5s infinite;
|
|
}
|
|
|
|
.delayed-transition {
|
|
display: inline-block;
|
|
|
|
width: 50px;
|
|
height: 50px;
|
|
border-radius: 50%;
|
|
background: black;
|
|
|
|
transition: width 5s 3s;
|
|
}
|
|
.delayed-transition.get-round {
|
|
width: 200px;
|
|
}
|
|
|
|
.delayed-multiple-animations {
|
|
display: inline-block;
|
|
|
|
width: 50px;
|
|
height: 50px;
|
|
border-radius: 50%;
|
|
background: green;
|
|
|
|
animation: move .5s 1s 10, glow 1s .75s 30;
|
|
}
|
|
|
|
.multiple-animations-2 {
|
|
display: inline-block;
|
|
|
|
width: 50px;
|
|
height: 50px;
|
|
border-radius: 50%;
|
|
background: blue;
|
|
|
|
animation: move .5s, glow 1s 2s infinite, grow 3s 1s 100;
|
|
}
|
|
|
|
.all-transitions {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
width: 50px;
|
|
height: 50px;
|
|
background: blue;
|
|
transition: all .2s;
|
|
}
|
|
.all-transitions.expand {
|
|
width: 200px;
|
|
height: 100px;
|
|
}
|
|
|
|
@keyframes move {
|
|
100% {
|
|
transform: translateY(100px);
|
|
}
|
|
}
|
|
|
|
@keyframes glow {
|
|
100% {
|
|
background: yellow;
|
|
}
|
|
}
|
|
|
|
@keyframes grow {
|
|
100% {
|
|
width: 100px;
|
|
}
|
|
}
|
|
</style>
|
|
<div class="not-animated"></div>
|
|
<div class="simple-animation"></div>
|
|
<div class="multiple-animations"></div>
|
|
<div class="transition"></div>
|
|
<div class="short-animation"></div>
|
|
<div class="delayed-animation"></div>
|
|
<div class="delayed-transition"></div>
|
|
<div class="delayed-multiple-animations"></div>
|
|
<div class="multiple-animations-2"></div>
|
|
<div class="all-transitions"></div>
|
|
<script type="text/javascript">
|
|
// Get the transitions started when the page loads
|
|
var players;
|
|
addEventListener("load", function() {
|
|
document.querySelector(".transition").classList.add("get-round");
|
|
document.querySelector(".delayed-transition").classList.add("get-round");
|
|
});
|
|
</script>
|