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.
Related
I am trying to position this sidebar just the opposite of what it is currently doing. I want the sidebar to come in from the right and stay right all through. not left.
this the sandbox link for you to reproduce - https://codesandbox.io/s/react-spring-sidebar-transition-forked-igmgr.
Thank you.
Position the sidebar to the right first.
.sidebar {
position: absolute;
right:0;
}
Change the transform to positive x direction
from: {
transform: "translateX(100%)"
},
enter: {
transform: `translateX(0)`
},
leave: {
transform: "translateY(100%)"
},
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.
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 update the data shown by a Directive using an animation:
slide old information off downwards;
while offscreen, change the data to be shown (I also presumably need to change the translateY from +100% to -100% at this stage)
slide the new content form above.
My approach is below, but it relies upon a $timeout. I have calibrated as best I can for my development machine but it is not always reliable, and leads to erratic visual effects. There must be a better way, such the second animation only starts when it is signalled that the first is complete?
This is my html
<div class="selectedRestoContainer divider">
<resto-elem
id="selectedResto"
resto="list.selectedResto"
idx="list.selectedIndex"
ng-class="list.animationClass"></resto-elem>
</div>
This is my css
.selectedRestoContainer {
$height : 65px;
height: $height;
overflow: hidden;
resto-elem {
min-height: $height; //
transform: translateY(-100%); // ensure that without .flash element is off screen
}
.flash-add { // start - off-screen above
transform: translateY(-100%);
transition: all 0.7s ease; // incoming - i.e. transition to 0
}
.flash, .flash-add.flash-add-active {
transform: translateY(0);
}
.flash-remove.flash-remove-active {
transform: translateY(100%);
transition: all 0.4s ease; // outgoing
}
}
And this is what I have in my controller
$scope.$on("selectedResto", (e, qname) => {
// start first animation (400ms set in css)
$timeout( () => this.animationClass = "", 0 );
// second animation starts 450ms later
$timeout( () => {
this.selectedIndex = qname;
this.selectedResto = this.recs[qname];
this.animationClass = "flash";
}, 450);
});