Where should I put react transition group style classes in my scss ? I want to animate fading. After inspecting it in action I clearly see the classes attached, but with no effect. I think I treid putting them almost everywhere.
Anyone with experience ?
#transitionGroupDiv{
// gallery styles etc.
// NOT WORKING HERE
.fade-enter {
opacity: 0;
}
.fade-enter-active {
opacity: 1;
transition: opacity 10000ms ease-out;
}
.fade-leave {
opacity: 1;
}
.fade-leave-active {
opacity: 0;
transition: opacity 10000ms ease-out;
}
.element{
// other styles etc.
}
}
I actually was not aware of scss rules. You have to use the parent selector reference &.
Example in this question: SO question.
Related
I'm trying to make some element blink in css, under React/material-ui, using withStyle.
The syntax from this post looks nice:
https://stackoverflow.com/a/48320520/9316077
.blink {
animation: blinker 1s step-start infinite;
}
#keyframes blinker {
50% {
opacity: 0;
}
}
I simply tried the following:
'#keyframes blinker': {
'50%': {
opacity: 0,
},
},
'& .blink': {
animation: '$blinker 1s step-start infinite',
},
Adding the $ before blinkerbased on this issue:
https://github.com/mui-org/material-ui/issues/13793
But this crashes my webpage. Any idea? Thanks!
Keyframes name is generated since JSS core v10 so depending on which version you are using you need to use $ when you are referencing a scoped name or without when name/id is global.
I'm trying to focus() an input inside a modal right after it opens using the modal's componentDidUpdate().
This is the CSS I'm using for the modal root element:
.auth-modal {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
align-items: center;
visibility: hidden;
opacity: 0;
transition: visibility 400ms, opacity 400ms;
&.auth-modal_is-opened {
visibility: visible;
opacity: 1;
}
}
As you can see, it has visibility: hidden; and opacity: 0; at first.
Then I have this in the modal component:
componentDidMount() {
this.emailInput.focus();
}
componentDidUpdate() {
this.emailInput.focus();
}
The componentDidMount() hook works as intended, the input gets focused, but the componentDidUpdate() hook does not work (as though it gets called, only the focus() doesn't work as intended).
I've managed to find the reason and it happens to be the CSS animation. If I remove the visibility animation it works (but the animation breaks, of course). I've also managed to make it work using a setTimeout() inside the hook as bellow:
componentDidUpdate() {
setTimeout(() => {
this.emailInput.focus();
}, 100);
}
This also works, but feels super hackish.
Is there any better way to achieve this? (I'm currently setting a timeout as a hack solution)
I am new to web development Trying to create a sliding page in angular ng-view but its not working as expected when the page two is entering its displaying below the page one till page one is available.please see the code here.
.slide.ng-enter{
transition-duration: 500ms;
transform: translateX(100%);
}
.slide.ng-enter-active{
transform: translateX(0%);
}
.slide.ng-leave{
transition-duration: 500ms;
transform: translateX(0%);
}
.slide.ng-leave-active{
transform: translateX(-100%);
}
I also need to make the page one slide from left to right.Can someone help me on this
I have added position: absolute to .slide. If that is acceptable in the project you are working then the below solution works fine. Please check the updated plunker.
.slide {
top: 0;
position: absolute;
width: 100%;
}
https://plnkr.co/edit/qC0YS2Gj3ddiNvuhjKzV?p=preview
I have used ngAnimateSwap to translate elements horizontally, vertically. However are other types of animations supported, such as opacity (fade-in and fade-out?)
When I modify the example that appears here animateSwap to use opacity instead of the top value, then the animation does not occur. Is this expected?
I was able to get it working using opacity. You have to play around with the css and understand what css element does what. Here's a plunkr of animateSwap being used with an opacity transition.
The original css is:
.swap-animation.ng-enter {
top:-250px;
}
.swap-animation.ng-enter-active {
top:0px;
}
.swap-animation.ng-leave {
top:0px;
}
.swap-animation.ng-leave-active {
top:250px;
}
I changed that to the following and I now have a crossfade working just fine:
.swap-animation.ng-enter {
top:0px;
opacity:0;
}
.swap-animation.ng-enter-active {
top:0px;
opacity:1;
}
.swap-animation.ng-leave {
top:0px;
opacity:1;
}
.swap-animation.ng-leave-active {
top:0px;
opacity:0;
}
I want to test Polymer applications with non-Shadow-DOM capable browsers like Firefox, PhantomJS, and maybe others using WebDriver.
WebDriver commands for Firefox and PhantomJS fail when I use something like
driver.findElement(const By.cssSelector('* /deep/ #some-div'));
Are there some rules how to best translated/approximate these selectors when the polyfills can not be applied:
/deep/
::shadow
:host()
:host-context()
:content
I would like to create a function that translates such selectors automatically to non-shadow-DOM selectors for browsers that don't support them before sending the request and for that I need to know how to translate them.
Question is a bit old, but in case you haven't figured it out yourselves yet.
/deep/ (deprecated): As you said in your answer, just removing it should work in most of the cases.
::shadow (deprecated): Can also just be removed. Replacing it with > might not work if node which you are targeting is not an immediate child of host element's shadow root.
:host() pseudo classes is used to select custom element from inside shadow-dom, in non-supported browsers it will be equal to selecting parent from child element. Since we don't have parent selectors in css and you are writing js for conversion, you can identify tagName of host element and use it instead of :host selector. Something like below:
:host {
opacity: 0.4;
transition: opacity 420ms ease-in-out;
}
:host(:hover) {
opacity: 1;
}
:host(:active) {
position: relative;
top: 3px;
left: 3px;
}
/*Convert it to*/
x-element {
opacity: 0.4;
transition: opacity 420ms ease-in-out;
}
x-element:hover {
opacity: 1;
}
x-element:active {
position: relative;
top: 3px;
left: 3px;
}
:host-context(<selector>) pseudo class matches the host element if it or any of its ancestors matches <selector>. for example:
Below rule will apply on custom element only when it's a descendant of an element with the class .different.
:host-context(.different) {
color: red;
}
<body class="different">
<x-foo></x-foo>
</body>
It won't be very easy to replace this one with anything simple. Even webcomponents polyfill doesn't attempt it. I can't think of any css only way to achieve this.
::content targets distributed child nodes of host element, i.e. all elements which are picked to display using content selectors. Replacing ::content selectors with tagName of host elements should work here. i.e.
::content > h3 {
color: green;
}
/*replace it with*/
x-element h3 {
color: green;
}
Note that I have removed child selector > also from above, because in non-supported browsers after distribution h3 won't be a direct descendant of x-element anymore. Given the way content selector is used, I'd suggest removing child selector also wherever available.
/deep/ can just be removed
::shadow can be replaced by >
don't know about the others yet