const props = useSpring({
transform: toggle ? "translateX(-200px)" : "translateX(0)",
opacity: toggle ? 1 : 0
});
I currently have a div with above styles and opacity works fine with the onclicks, but i'm having trouble with translation.
Basically i want to animate sort of a slide out div. What would be the correct way of going about it?
Related
I want to create a smooth transition between 2 images with a legend.
The images come from an object-array of images.
Because works only on single tags and components, I've created a component to define the image+legend.
<transition>
<home-image :slide="slide" :key="slide"></home-image>
</transition>
The classes I define are like this
.v-enter-active,
.v-leave-active {
transition: opacity 2s ease-in-out;
}
.v-leave,
.v-enter-to {
opacity: 1;
}
.v-enter,
.v-leave-to {
opacity: 0;
}
The new image is returned by a method
updateSlide() {
this.slide = this.entries[ Math.floor( Math.random() * this.entries.length ) ];
}
where entries is my array defined in data
this.slide is updated in regular intervals, every 10seconds like this, which is defined in the created() section
this.updateSlide();
this.uSlide = setInterval( this.updateSlide, 10000);
The code works, in the sense that a new image is loaded in this.slide every 10 seconds.
However, the transitions work only "half-way".
There is no transition fading out: the "old image" disappears and makes way for the new image fading in.
However, what I'd like is a smooth transition from one to the other.
I've tried more than a couple of ideas including using mode="out-in" and "in-out" but nothing works as I want.
What am I overlooking?
I use "vuex-module-decorators" and dynamically determine the style in this getter:
<div class="viewport":style="viewportStyleVars">...</div>
get viewportStyleVars() {
const tx = -this.viewportRect.x;
const ty = -this.viewportRect.y;
return {
'--translate-x': `${tx}px`,
'--translate-y': `${ty}px`,
}
}
How to make change happen smoothly, not instantly?
I would be grateful for the hints, I am not familiar with the animation.
You just need to add transition in CSS to the div with class .viewport something like:
.viewport{
transition: all 1s linear;
}
The 1s in the transition, is the time, that the action will take, you can tweak this value to something smaller, like 0.1s, if that suits you better.
I have a React application. I am using React Spring for overall animations. I am not able to animate 2 things -
The animation I am experimenting with is a simple opacity animation.
import { useSpring, animated } from "react-spring";
/***
Some code
***/
const styleProps = useSpring({
to: { opacity: 1 },
from: { opacity: 0 }
});
1) Is conditional elements. Please refer code below -
<section>
{!flag ? (
<animated.div style={styleProps}>
Some random text
</animated.div>
) : (
<animated.div style={styleProps}>
To appear with animation
</animated.div>
)
}
</section>
The issue is that the animated.div of react-spring does not animate the same. What is the right way? Is there a way to animate the same without react-spring?
2) I have a conditional bootstrap className attached based on a flag. I want to animate the same
<animated.div style={styleProps} className={classnames({
"col-lg-6": !flag,
"col-lg-12": flag
})}
>
Random Content
</animated.div>
For this also, the issue is that it is not animating. What is the right way?
Yo have a lot of question. I can answer part of it and maybe you will understand it better.
Your example of useSpring animation is triggered only once. And when you switch between components with the conditional render it will no longer animate.
But you can re-trigger the animation in useSpring, if you change the 'to' parameter conditionally (and leave the render to react-spring).
const styleProps1 = useSpring({
to: { opacity: flag ? 1 : 0 },
from: { opacity: 0 }
});
const styleProps2 = useSpring({
to: { opacity: flag ? 0 : 1 },
from: { opacity: 0 }
});
<section>
<>
<animated.div style={styleProps1}>
Some random text
</animated.div>
<animated.div style={styleProps2}>
To appear with animation
</animated.div>
</>
</section>
You have to use absolute positioning if you want the element to appear in the same place.
You can achieve similar effect with useTranstion also with absolute positioning. In this case the element dismounted at the end of animation. So if you have mouse click problems with the useSpring method you can try to switch to useTransition.
Maybe it also answer your second questiona as well. I am not familiar with bootstrap.
Usually, we solve this problem by removing and adding a class with CSS animation attributes. How to remove animation attribute and add again quickly to trigger animation using styled-components library?
You could use props to change the styles, for example:
const MyComp = styled.div`
transition: width 2s;
width: ${props => props.animate ? "20px" : "10px"};
`
You can then pass a prop when you use the component to trigger the animation:
<MyComp animate={booleanFlag} />
In this case, you can toggle the animate prop between true and false as necessary. Perhaps using state from the parent component.
I'm creating a dashboard page which is full of CSS animations. From Bootstrap stuff (animated progress bars) to custom animations.
When you click some of the elements, a near full-screen modal is triggered, which overlaps all the animations, so I want to temporarily pause them all (because of possible performance issues) by adding/removing a class to one of the top elements, and using CSS to pause all animations when that class is set.
This solution would use only a single line of js, just to toggle the class on opening the modal.
My template looks somewhat like this:
<body>
<div class="modal">
<!-- Modal code -->
</div>
<div class="app">
<!-- Template -->
</div>
</div>
Is it possible to add a class to .app which pauses every CSS animation in every child element?
Note 1:
I know you can use the exact opposite of what I request: namely, have a default .animation-play class to one of the top elements, and prefix every child element with an animation with this class, and then remove this class to pause every animation. Just like:
app.animation-play .somediv .somediv .element {
// animation code
}
app.animation-play .somediv .element {
// animation code
}
app.animation-play .somediv .somediv .somediv .somediv .element {
// animation code
}
But then I have to edit a lot of CSS code, and it doesn't look very nice either.
Note 2:
I'm also open for a JS solution, but I would heavily prefer a pure CSS way of achieving this.
You can use a universal selector to target everything when a class of 'paused' is added to your app wrapper, however many CSS linters still warn against using these due to performance impacts.
To be honest the impact is probably minimal these days and many CSS resets for example use them.
You could use something like:
.app.paused * {
animation: none;
}
EDIT:
Looking through the comments above it seems as though the above selector doesn't have enough precedence to overwrite the animations so '!important' has been added.
.app.paused * {
animation: none !important;
transition: none !important;
}
However this is generally not a great idea, I always try to avoid using '!important' at all costs due to the difficulty in maintaining the stylesheet with these selectors in place. If you can overwrite the animations with a greater precedence then it would be better to do so rather than using '!important'.
EDIT 2:
As you mentioned you were open to JS solutions, here is some JS that should clear all the animations within a given selector. I'm not sure what the performance impact of doing it this way is but I added it here just in case someone else prefers to do it only using JS:
let stopAnimationsWrap = document.querySelector('.app');
let stoppedAnims = [];
// Stop animations
document.querySelector('.stop').addEventListener('click', () => {
let appAllEls = stopAnimationsWrap.querySelectorAll('*');
let allElsAr = Array.prototype.slice.call(appAllEls);
allElsAr.forEach((thisEl) => {
let elClass = thisEl.classList[0];
let cs = getComputedStyle(thisEl, null);
let thisAnimation = cs.getPropertyValue('animation-name');
if (thisAnimation !== 'none') {
stoppedAnims.push([elClass, {
'animationName': thisAnimation
}]);
thisEl.style.animationName = 'none';
}
});
});
// Start animations
document.querySelector('.start').addEventListener('click', () => {
stoppedAnims.forEach((thisEl) => {
let domEl = '.' + thisEl[0];
stopAnimationsWrap.querySelector(domEl).style.animationName = thisEl[1].animationName;
});
});
Fiddle:
https://jsfiddle.net/vu6javb2/14/
.app {
-webkit-animation-play-state: paused; /* Safari 4.0 - 8.0 */
animation-play-state: paused;
}
on hover:
.app:hover {
-webkit-animation-play-state: paused; /* Safari 4.0 - 8.0 */
animation-play-state: paused;
}