So, I want the animation to only apply when ng-show is true. I'm having a hard time trying to disable a "fade out" effect. In jQuery this is simply $.hide and not $.fadeOut. How do I achieve this in Angular?
http://jsfiddle.net/7twjd3an/2/
CSS
.fadeIn {
-webkit-transition:all linear 0.25s;
transition:all linear 0.25s;
}
.fadeIn.ng-hide {
opacity:0;
}
.fadeIn.ng-show {
opacity: 1;
}
You can add different transitions for .ng-show and .ng-hide
Adding the following to .ng-hide would remove the transition styles when you hide the element while retaining the existing transition styles when you show the element:
.ng-hide {
opacity: 0;
transition: none 0;
}
Related
I am trying to position an image inside a Swiper slider, and I need it to overflow the Swiper Container which has an overflow of hidden and display it on the bottom of another container. I am wondering is this possible to achieve?
see actual design
I have tried setting the Swiper Container to:
overflow: hidden;
and the .swiper-slide to:
.swiper-slide {
opacity: 0;
visibility: hidden;
transition: opacity 200ms ease-in-out, visibility 200ms ease-in-out;
}
so when the next slide come into play I trigger it back with:
.swiper-slide-active {
opacity: 1;
visibility: visible;
}
sadly this method makes the scroll bar appear on the bottom of the page...
see screenshot example here
also I made a Codesandbox to keep the things simple see codesandbox example
I have a card game where the player selects a card from one deck to add to a second. Pushing the button on the active card will move it to the other deck and then make it active. The active deck should be larger when in focus, while the inactive is minimized like so:
I have implemented it using the Swiper Coverflow effect in both SwiperJS and React-Swiper, but in either case the height is tied to the .swiper-slide CSS class. The width on this class is set to a fixed size which drives how the rest of the Swiper is rendered. It seems that the only way to change the slide width (and resulting Swiper height) is to apply fixed width classes to the slide based on state.
JSX:
<SwiperSlide
key={index}
className={
props.selected
? "swiper-fixed-width-300 "
: "swiper-fixed-width-100 "
}
>
CSS:
.swiper-fixed-width-100 {
width: 100px;
}
.swiper-fixed-width-300 {
width: 300px;
}
However this approach has no easing or transition like other interactions so it feels too abrupt. I would like to find a way to do the same using the Swiper API functions. How can this same interaction be achieved with the API or without manipulating the CSS class?
Example Sandbox
I would use transform: scale(0.3) on the parent (Deck) and keep the width of the slider at 300px.
JSX (Deck.js):
<div
className={
props.selected
? "Deck Deck-selected"
: "Deck Deck-unselected"
}
>
<SwiperSlide key={index} className="swiper-fixed-width-300">
CSS:
.Deck {
transition: transform 0.3s ease;
}
.Deck-selected {
transform: scale(1);
}
.Deck-unselected {
transform: scale(0.3);
}
.swiper-fixed-width-300 {
width: 300px;
}
Here is my sandbox with the effect transitioning.
If you want to change the size of the "decks" and maintain a smooth transition effect, I am thinking you could use the scale() transform function which is also a CSS solution.
https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/scale()#examples
If you combine this with a CSS transition you can achieve the effect you mentioned.
Here is a blog post from thoughtbot.com that dives into using scale() and CSS transitions:
https://thoughtbot.com/blog/transitions-and-transforms
I'm using a Switch component from Material UI to expand/collapse elements in a list. And when seeing the page in Safari on iOS, I'm experiencing a ghosting issue where the switches in the next elements often remain visible after expanding an element. This is especially bad when using transitions. But when scrolling the ghost switches disappear and everything looks fine.
Is this a Material UI issue or something else? Anything I can do as a workaround?
https://codesandbox.io/s/material-ui-switch-ghost-issue-2ie26?file=/src/App.js
The Switch ripple animation and Item animation are flighting for resources to do the animations and Safari seems like it is not able to optimise the animation process.
Therefore, you can add will-change: transform; in Item css to notify browser there will be a transform event and be ready:
const Item = styled.div`
max-height: ${({ $isSelected }) => ($isSelected ? "20rem" : "2.5rem")};
will-change: transform;
transition: max-height 0.1s ease-out;
overflow: hidden;
background: gray;
margin-bottom: 0.2rem;
`;
The definition of will-change:
https://developer.mozilla.org/en-US/docs/Web/CSS/will-change
Workable codesandbox:
https://codesandbox.io/s/material-ui-switch-ghost-issue-forked-fgqqx
So, I am trying to fade in and fade out a set of inputs based on what button the user clicks. I tried using jQuery, but, the div was fading in and fading out at the same speed...
I am using es6 classes and react.
What I want is the user to press a button and the inputs fadeIn. Another button, the inputs fadeOut. I don't mind using jQuery, but I would like to understand how to do this with react.
renderInputs() {
if (this.state.addType === "image") {
return (
<div className="addContainer">
<input type="text" className="form-control" />
</div>
)
} else {
return (
other inputs
)
}
}
render() {
return (
<CSSTransitionGroup
transitionName="fadeInput"
transitionEnterTimeout={500}
transitionLeaveTimeout={300}>
{this.renderInputs()} // this doesn't work but I want this content to be conditional.
</CSSTransitionGroup>
)
}
// SCSS
.fadeInput-enter {
opacity: 0.01;
}
.fadeInput-enter.fadeInput-enter-active {
opacity: 1;
transition: opacity 500ms ease-in;
}
.fadeInput-leave {
opacity: 1;
}
.fadeInput-leave.fadeInput-leave-active {
opacity: 0.01;
transition: opacity 300ms ease-in;
}
Just use a conditional class and CSS.
Have a state variable like visible.
this.state = {
visible:false
}
And for the other inputs do something like
<input className={this.state.visible?'fadeIn':'fadeOut'} />
So depending upon the state.visible the input will have a class of either fadeIn or fadeOut.
And then just use simple CSS
.fadeOut{
opacity:0;
width:0;
height:0;
transition: width 0.5s 0.5s, height 0.5s 0.5s, opacity 0.5s;
}
.fadeIn{
opacity:1;
width:100px;
height:100px;
transition: width 0.5s, height 0.5s, opacity 0.5s 0.5s;
}
So every time the state.visible changes the class changes and the transition takes place. The transition property in CSS is basically all the transitions separated by commas. Within the transition the first argument is the property to be modified (say height, width etc), second is transition-duration that is the time taken for the transition and third(optional) is transition-delay ie how much time after the transition has been initiated does the transition for the particular property take place. So when this.state.visible becomes true the .fadeIn class is attached to the object. The transition has height and width taking 0.5s each so that will take 0.5s to grow and after it is finished the opacity transition (which has a delay of 0.5s) will trigger and take a further 0.5s to get opacity 1. For the hiding it's the reverse.
Remember to have the OnClick event on the button handle the changing of this.state.visible.
You could also achieve this with CSSTransitionGroup
const Example = ({items, removeItemHandler}) => {
return (
<div>
<CSSTransitionGroup transitionName="fadeInput"
transitionEnterTimeout={500}
transitionLeaveTimeout={300}>
{this.renderInputs().map(function(input) {
return (
<div key={input.id} className="my-item" onClick={removeItemHandler}>
{item.name}
</div>
);
})}
</ReactCSSTransitionGroup>
</div>
);
};
When working with React, sometimes you want to animate a component directly after it has been mounted, or directly prior to it being unmounted.
Like in your example, Let’s say you map over an array of objects and render a list in your application. Now let’s say you want to add animations to fade-in new items that have been added to the array or fade-out items as they are removed from the array.
The CSSTransitionGroup component takes in transitionEnterTimeout and transitionLeaveTimeout as props. What these values represent are the duration in milliseconds of your enter and leave transitions.
A simple way to achieve this with styled components...
const Popup = styled.div`
width: 200px;
height: 200px;
transition: opacity 0.5s;
opacity: ${({ showPopup }) => (showPopup ? '1' : '0')};
`;
<Popup showPopup={showPopup}>
{...}
</Popup>
So I have this simple fade animation using AngularJS 1.2 and the ngAnimate module but I'm having a small issue.
I want to show/hide an element with a fade animation but I want the element to fade from opacity: 0 to opacity: 0.5. The thing is, the element fades from 0 to 0.5 within the duration period I set, but after the animation ends, it sets the opacity to 1. I don't want that.
This is my CSS code:
.overlay {
background-color: #ff0000;
position: absolute;
width: 150px;
height: 150px;
}
.fade-animation.ng-hide-add, .fade-animation.ng-hide-remove {
transition: 2s linear all;
display: block !important;
}
.fade-animation.ng-hide-remove {
opacity: 0;
}
.fade-animation.ng-hide-remove.ng-hide-remove-active {
opacity: .5;
}
.fade-animation.ng-hide-add {
opacity: .5;
}
.fade-animation.ng-hide-add.ng-hide-add-active {
opacity: 0;
}
Here's a sample of the problem: http://jsfiddle.net/Kn3th/8/
I'm testing this on Firefox.
That's because as soon as the animation completes, the animation-related classes are removed, so only the .overlay definition applies. Just add this to your CSS:
.overlay {
...
opacity: .5; // <-- add this line to apply an opacity of 0.5
} when the animation is over
See, also, this short demo.