Skip to content

/ servo

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Support pseudo elements for transition and animations #10316

Closed
JasonWeathersby opened this issue Mar 31, 2016 · 4 comments
Closed

Support pseudo elements for transition and animations #10316

JasonWeathersby opened this issue Mar 31, 2016 · 4 comments
Labels
A-layout/animations A-layout/uncategorized

Comments

@JasonWeathersby
Copy link

@JasonWeathersby JasonWeathersby commented Mar 31, 2016 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title></title>

    <style>
        /* Sweep To Right */      
        .hvr-sweep-to-right {
            display: inline-block;
            vertical-align: middle;
            position: relative;
            -webkit-transition-property: color;
            transition-property: color;
            -webkit-transition-duration: 0.3s;
            transition-duration: 0.3s;
        }
        .hvr-sweep-to-right:before {
            content: "";
            position: absolute;
            z-index: -1;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: #2098d1;
            -webkit-transform: scaleX(0);
            transform: scaleX(0);
            -webkit-transform-origin: 0 50%;
            transform-origin: 0 50%;
            -webkit-transition-property: transform;
            transition-property: transform;
            -webkit-transition-duration: 0.3s;
            transition-duration: 0.3s;
            -webkit-transition-timing-function: ease-out;
            transition-timing-function: ease-out;
        }
        .hvr-sweep-to-right:hover,
        .hvr-sweep-to-right:focus,
        .hvr-sweep-to-right:active {
            color: white;
        }
        .hvr-sweep-to-right:hover:before,
        .hvr-sweep-to-right:focus:before,
        .hvr-sweep-to-right:active:before {
            -webkit-transform: scaleX(1);
            transform: scaleX(1);
        }
    </style>

</head>

<body>
    <a href="#" class="hvr-sweep-to-right">sweep</a>
</body>

</html>
@larsbergstrom
Copy link
Contributor

@larsbergstrom larsbergstrom commented Apr 9, 2016

I'm seeing transitions work in a simple example like the one below, but it happens instantaneously, rather than smoothly over the provided time.

@SimonSapin should this be supported?

<html> <head>
<style>
div {
  position: absolute;
     bottom: 10px;
    left: 20px;
    width: 100px;
    height: 100px;
    background: red;
    transition: 2s;
}

div:hover {
    left: 5px;
}
</style>
</head>
<body>
<div>asdf</div>
</body> </html>
@nox
Copy link
Member

@nox nox commented Oct 1, 2017

I have a blank page loading the sample from the issue description.
@mrobinson
Copy link
Member

@mrobinson mrobinson commented May 6, 2020

It looks like the issue here might be missing animation support for pseudo content.
@mrobinson mrobinson changed the title Can't get sweep effect to work Support pseudo elements for transition and animations May 23, 2020
@mrobinson
Copy link
Member

@mrobinson mrobinson commented May 23, 2020

Going to take over this bug to track support for animations and transition on pseudo elements since there is a nice test case here.
This was referenced May 23, 2020
Closed
Closed
mrobinson added a commit to mrobinson/servo that referenced this issue Jun 15, 2020
@mrobinson
Add animation and transition support for pseudo-elements
f8397f0 
This change extends the DocumentAnimationSet to hold animations for
pseudo-elements. Since pseudo-elements in Servo are not in the DOM like
in Gecko, they need to be handled a bit carefully in stylo.  When a
pseudo-element has an animation, recascade the style. Finally, this
change passes the pseudo-element string properly to animation events.

Fixes: servo#10316
@mrobinson mrobinson mentioned this issue Jun 15, 2020
Merged
4 of 4 tasks complete
mrobinson added a commit to mrobinson/servo that referenced this issue Jun 16, 2020
@mrobinson
Add animation and transition support for pseudo-elements
d53782b 
This change extends the DocumentAnimationSet to hold animations for
pseudo-elements. Since pseudo-elements in Servo are not in the DOM like
in Gecko, they need to be handled a bit carefully in stylo.  When a
pseudo-element has an animation, recascade the style. Finally, this
change passes the pseudo-element string properly to animation events.

Fixes: servo#10316
bors-servo added a commit that referenced this issue Jun 16, 2020
@bors-servo
Auto merge of #26923 - mrobinson:pseudo-animations-2, r=emilio
Verified
This commit was created on GitHub.com and signed with a verified signature using GitHub’s key.
GPG key ID: 4AEE18F83AFDEB23 Learn about signing commits
Loading status checks…
f67b75f 
Add animation and transition support for pseudo-elements

This change extends the DocumentAnimationSet to hold animations for
pseudo-elements. Since pseudo-elements in Servo are not in the DOM like
in Gecko, they need to be handled a bit carefully in stylo.  When a
pseudo-element has an animation, recascade the style. Finally, this
change passes the pseudo-element string properly to animation events.

---
<!-- Thank you for contributing to Servo! Please replace each `[ ]` by `[X]` when the step is complete, and replace `___` with appropriate data: -->
- [x] `./mach build -d` does not report any errors
- [x] `./mach test-tidy` does not report any errors
- [x] These changes fix #10316
- [x] There are tests for these changes

<!-- Also, please make sure that "Allow edits from maintainers" checkbox is checked, so that we can help you if you get stuck somewhere along the way.-->

<!-- Pull requests that do not address these steps are welcome, but they will require additional verification as part of the review process. -->
bors-servo added a commit that referenced this issue Jun 16, 2020
@bors-servo
Auto merge of #26923 - mrobinson:pseudo-animations-2, r=emilio
Verified
This commit was created on GitHub.com and signed with a verified signature using GitHub’s key.
GPG key ID: 4AEE18F83AFDEB23 Learn about signing commits
Loading status checks…
a84b060 
Add animation and transition support for pseudo-elements

This change extends the DocumentAnimationSet to hold animations for
pseudo-elements. Since pseudo-elements in Servo are not in the DOM like
in Gecko, they need to be handled a bit carefully in stylo.  When a
pseudo-element has an animation, recascade the style. Finally, this
change passes the pseudo-element string properly to animation events.

---
<!-- Thank you for contributing to Servo! Please replace each `[ ]` by `[X]` when the step is complete, and replace `___` with appropriate data: -->
- [x] `./mach build -d` does not report any errors
- [x] `./mach test-tidy` does not report any errors
- [x] These changes fix #10316
- [x] There are tests for these changes

<!-- Also, please make sure that "Allow edits from maintainers" checkbox is checked, so that we can help you if you get stuck somewhere along the way.-->

<!-- Pull requests that do not address these steps are welcome, but they will require additional verification as part of the review process. -->
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
A-layout/animations A-layout/uncategorized
Projects
None yet
Milestone
No milestone
Linked pull requests

Successfully merging a pull request may close this issue.

Add animation and transition support for pseudo-elements
5 participants
@mrobinson @jdm @nox @larsbergstrom @JasonWeathersby
You can’t perform that action at this time.