Is it possible to change display of an element to none only when the opacity would be equal to 0?
I have the following code:
<slide class=“showing” :class=“{notshowing:!opened}”
<div> Some text</div>
</slide>
And css
.showing {
display:flex
}
.notshowing {
transition:2s;
opacity:0
}
I have a carousel with too many slides, to get a clear image,e .g.on first slide I have 3 options, if I click on first option it throws me on the second slide(after that I can comeback to the first slide by clicking on the button(carousel is styled that way that user cannot drag it)), second option to third slide etc.
so if I have too many options, it will take me different amount of time to get to different options. I came up only with one solution and it is to track by class the slide which I need(which option user click),hide the others, so that the number of slide for every option would be 1. However,if I instantly set display of slide to none, it would look awful. So that’s why I want to set opacity to 0 with transition when I leave the slide and then hide it
Related
I got an item list where each item is put in a flex-box, displaying the list like a matrix (several rows and items per row). Using <transition-group class="move"> I apply a simple move transition on the <div v-for="item in items" :key="item.id">
move {
transition: transform 1s;
}
Now, this works perfectly when changing the order of the items or when adding new items; meaning all existing items move to their new place smoothly.
But: If I remove items from the list and some gaps occur, the existing items do NOT fill these gaps smoothly but jump to their new position without animation.
What's the reason for those existing items to behave differently, smoothly moving in their new position if a new item is put in between them but jump back without animation when the very same item is removed? How can I achieve a smooth move both ways?
Found the answer: Using the move transition, the -leave-active transition class must apply a position: absolute declaration, in order to take it out of the layout flow, so the siblings can -move in to place around it.
React keys are not working.
If I swap the position of two react elements (item0 and item1) positioned with transform transform: translate(); a css transition is triggered, only if the elements were rendered in the same order.
If I change the order of the render (position swap still the same but now item0 renders after item1), the css transition is not triggered.
It looks like react is deleting the DOM element and recreating it, even if they have React keys set.
Here is a simple JSfiddle with the problem.
https://jsfiddle.net/santiagopuentep/vvpezbp9/2/
Here is a written explanation:
Two React elements (item0 and item1) positioned with transform: translate(); in css and with a css transition active for that transform.
The app renders a list of items using a layout.
The first layout is:
item0 at translate(0px,0px); and item1 at translate(0px,50px);.
The second layout with the same items but with positions flipped:
item0 at translate(0px,50px); and item1 at translate(0px,0px);.
Clicking on any of the two items changed the layout back and forth from the two, swapping their positions and thus triggering the css transition for the position change.
This works just fine, the transitions trigger correctly.
The problem happens if the second layout makes the item1 render after item0 (only change in render order, css translate positions still swapped), the transition for the second element is lost.
This looks like React is deleting the element instead of just reordering it, even if I have keys set.
Please help!
Thank you very much! I confirm this issue, so workaround is:
lastOrder = []
render() {
let cards=this.props.cardList
// HERE I RESORT NEW LIST LIKE PREVIOUS IT
if (this.lastOrder.length) cards.sort((a, b) =>
(this.lastOrder.indexOf(a.id) - this.lastOrder.indexOf(b.id)))
// AND SAVE LAST ORDER
this.lastOrder = cards.map(card => card.id)
return <div className='board'>
{cards.map(card => <Card key={card.id} {...card} />)}
</div>
}
I have the following animation code attached to my component
animations:[
trigger('slide', [
state('show', style({
height: '*'
})),
state('hide', style({
position: 'relative',
height: 0,
overflow: 'hidden'
})),
transition('show <=> hide',animate('130ms ease-out'))
])
]
This is quite hard to explain, (and I can't seem to get animations to work on plunker) but here goes.
The current functionality is as follows:
User clicks a button to display table.
Table smoothly slides into view from below a div.
User click button again.
Table smoothly slides out of the view up into the div.
The desired functionality is as follows:
User clicks a button to display table.
Table smoothly slides into view from below a div.
More rows are added to table (could be a large number of rows)
Animation handles the new table height and instead of just instantly being displayed there is a smoothing animation to gradually move to the new height.
User Clicks button.
Table slides back up under div again.
Edit: here is a plunker demo. You can see when you add/remove rows from the table the animation does not smoothly move to the new height.
The problem is caused because if you are in true state and rows are added.
The animation will not transition to true again, because it is already in true state.
So how will I trigger a transition to the "newHeight" state when items are added?
I made a quick, rough, animation example using angular animations API:
https://embed.plnkr.co/7qWuHmbFFie4p8Y9h53T/
I would play around with that plnkr until you get the animations right. You can hide the element behind something by either removing the table entirely after animating it down by toggling the animation with an *ngIf in your template, or do it the way I show in the plnkr, but toggle the visibility of the table after the animation is complete. I prefer the *ngIf way.
For individual rows being added or removed:
I would add an #animation to every row of the table and enable the up animation if the number of rows increases, or down if it decreases.
With the following rules:
.container[data-direction="reverse"] .pane[style*="display: none"]{
animation:SlideOutToRight 1s ease;
}
.container[data-direction="forward"] .pane[style*="display: none"]{
animation:SlideOutToLeft 1s ease;
}
The animation runs whenever (a) the data-direction attribute changes and (b) whenever the style becomes display:none. How can I change this code so that the animation only runs when the style becomes display:none but not when the data-direction attribute changes?
Right now, when the direction changes, all of the containers go flying across the screen to the other side because the animation gets applied to all of them when the data attribute changes value.
The data-direction attribute should only control which animation plays, but changes to it's value should not trigger the animation. Is this possible?
Update:
Here is a fiddle of the problem: https://jsfiddle.net/j6ytzbh6/
Expected behavior: The forward button should cause the next sequential box to enter from the right hand side while the current box exists left. The backward button should cause the previous sequential box to enter from the left while the current box exits right. No other box should move or cross the view-port when its not it's turn to move.
Reminder: This is a CSS question, so doing the animation in javascript is cheating. The idea is that Javascript controls functionality (ie a box should be shown or hidden) while css controls presentation (ie. do we make it disappear, fade out or fly to the side). You shouldn't have to re-write your plugin to change the visual way things get shown or hidden.
I'm trying to use CSS transforms to make the center object in a carousel have more focus/attention. (Carousel is Slick.js)
Everything works great, except when I go from the last item back to the first item, there is a pause and a jump before the change appears.
What is causing this? How do I fix it?
https://jsfiddle.net/6d91cqoq/1/
//pseudo code
EDIT: It also happens going from the first to the last.
EDIT 2:
It's worth noting I took the idea from the Slick.js website: http://kenwheeler.github.io/slick/
On the page with the 'Center Mode' example, it is using transforms to do this exact thing. I cannot for the life of me figure out what is different, other than the target element.
EDIT 3: I did attempt to change my elements to H3 elements, as is in the sample. No change.
The cause for this is that Slick changes the DOM order of the slide elements when switching from "first to last". The transition doesn't kick in when dom elements are removed and added back... You can work around this by playing around with javascript and Slicks beforeChange and afterChange events instead of a pure CSS solution. I have made an example, although the example I made also slightly changes the effect (the center slide won't widen until it is in the center, e.g. afterChange). Maybe with Slicks, next and previous slide parameters you can make it work like your example, didn't have time to investigate it more.
https://jsfiddle.net/6d91cqoq/2/
Changes made to your example:
//Added my own "active" class, so it does not to interfere with slicks active class
.slick-slide.active {
opacity: 1;
transform: scale(1.50);
}
JS
//make current center active after initialization
$('.slick-center').addClass('active');
//before slide change, make all "inactive"
$('.center').on('beforeChange', function(event, slick, index){
$('.slick-slide').removeClass('active');
});
//after change make the center one "active"
$('.center').on('afterChange', function(event, slick, index){
$(slick.$slides[index]).addClass('active');
});