Skip to content

Commit ba6864a

Browse files
xidedixxidedix
committed
fix(carousel): first image slides in for crossfade transition, animations refactor, closes #213 - thanks @baloo32 
1 parent b628ed1 commit ba6864a

File tree

4 files changed

+152
-144
lines changed

4 files changed

+152
-144
lines changed

‎projects/coreui-angular/src/lib/carousel/carousel-inner/carousel-inner.component.html‎

Lines changed: 0 additions & 3 deletions
This file was deleted.

‎projects/coreui-angular/src/lib/carousel/carousel-inner/carousel-inner.component.ts‎

Lines changed: 20 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,25 @@
1-
import { AfterContentChecked, AfterContentInit, Component, contentChildren, inject, signal } from '@angular/core';
2-
3-
import { fadeAnimation, slideAnimation } from '../carousel.animation';
1+
import {
2+
AfterContentChecked,
3+
AfterContentInit,
4+
Component,
5+
computed,
6+
contentChildren,
7+
inject,
8+
signal
9+
} from '@angular/core';
410
import { CarouselItemComponent } from '../carousel-item/carousel-item.component';
511
import { CarouselState } from '../carousel-state';
12+
import { carouselPlay } from '../carousel.animation';
613

714
@Component({
815
selector: 'c-carousel-inner',
9-
templateUrl: './carousel-inner.component.html',
1016
styleUrls: ['./carousel-inner.component.scss'],
11-
animations: [slideAnimation, fadeAnimation],
17+
animations: [carouselPlay],
18+
template: '<ng-content />',
1219
host: {
13-
'[class.carousel-inner]': 'true'
20+
class: 'carousel-inner',
21+
'[@carouselPlay]': 'slideType()',
22+
'[@.disabled]': '!animate()'
1423
}
1524
})
1625
export class CarouselInnerComponent implements AfterContentInit, AfterContentChecked {
@@ -19,7 +28,11 @@ export class CarouselInnerComponent implements AfterContentInit, AfterContentChe
1928
readonly activeIndex = signal<number | undefined>(undefined);
2029
readonly animate = signal<boolean>(true);
2130
readonly slide = signal({ left: true });
22-
readonly transition = signal('slide');
31+
readonly transition = signal('crossfade');
32+
33+
readonly slideType = computed(() => {
34+
return { left: this.slide().left, type: this.transition() };
35+
});
2336

2437
readonly contentItems = contentChildren(CarouselItemComponent);
2538
readonly #prevContentItems = signal<CarouselItemComponent[]>([]);

‎projects/coreui-angular/src/lib/carousel/carousel.animation.ts‎

Lines changed: 126 additions & 132 deletions
Original file line numberDiff line numberDiff line change
@@ -1,142 +1,136 @@
1-
import {
2-
animate,
3-
group,
4-
query,
5-
state,
6-
style,
7-
transition,
8-
trigger,
9-
} from '@angular/animations';
1+
import { animate, animation, group, query, state, style, transition, trigger, useAnimation } from '@angular/animations';
102

11-
export function toLeft(fromState: any, toState: any): boolean {
12-
return toState.left === true;
3+
export function toSlideLeft(fromState: any, toState: any): boolean {
4+
return toState.left === true && toState.type === 'slide';
135
}
14-
export function toRight(fromState: any, toState: any): boolean {
15-
return toState.left === false;
6+
7+
export function toSlideRight(fromState: any, toState: any): boolean {
8+
return toState.left === false && toState.type === 'slide';
9+
}
10+
11+
export function toFadeLeft(fromState: any, toState: any): boolean {
12+
return toState.left === true && toState.type !== 'slide';
13+
}
14+
15+
export function toFadeRight(fromState: any, toState: any): boolean {
16+
return toState.left === false && toState.type !== 'slide';
1617
}
1718

18-
export const slideAnimation = trigger('slideAnimation', [
19-
state(
20-
'*',
21-
style({ transform: 'translateX(0)', display: 'block', opacity: 1 })
22-
),
23-
transition(
24-
toLeft,
25-
group([
26-
query(
27-
':leave',
28-
[
29-
animate(
30-
'0.6s ease-in-out',
31-
style({
32-
transform: 'translateX(-100%)',
33-
})
34-
),
35-
],
36-
{ optional: true }
37-
),
38-
query(
39-
':enter',
40-
[
19+
export const slideAnimationLeft = animation(
20+
group([
21+
query(
22+
':leave',
23+
[
24+
animate(
25+
'0.6s ease-in-out',
4126
style({
42-
transform: 'translateX(100%)',
43-
}),
44-
animate('0.6s ease-in-out', style('*')),
45-
],
46-
{ optional: true }
47-
),
48-
])
49-
),
50-
transition(
51-
toRight,
52-
group([
53-
query(
54-
':enter',
55-
[
27+
transform: 'translateX(-100%)'
28+
})
29+
)
30+
],
31+
{ optional: true }
32+
),
33+
query(
34+
':enter',
35+
[
36+
style({
37+
transform: 'translateX(100%)'
38+
}),
39+
animate('0.6s ease-in-out', style('*'))
40+
],
41+
{ optional: true }
42+
)
43+
])
44+
);
45+
46+
export const slideAnimationRight = animation(
47+
group([
48+
query(
49+
':enter',
50+
[
51+
style({
52+
transform: 'translateX(-100%)'
53+
}),
54+
animate('0.6s ease-in-out', style('*'))
55+
],
56+
{ optional: true }
57+
),
58+
query(
59+
':leave',
60+
[
61+
animate(
62+
'0.6s ease-in-out',
5663
style({
57-
transform: 'translateX(-100%)',
58-
}),
59-
animate('0.6s ease-in-out', style('*')),
60-
],
61-
{ optional: true }
62-
),
63-
query(
64-
':leave',
65-
[
66-
animate(
67-
'0.6s ease-in-out',
68-
style({
69-
transform: 'translateX(100%)',
70-
})
71-
),
72-
],
73-
{ optional: true }
74-
),
75-
])
76-
),
77-
]);
64+
transform: 'translateX(100%)'
65+
})
66+
)
67+
],
68+
{ optional: true }
69+
)
70+
])
71+
);
7872

79-
export const fadeAnimation = trigger('fadeAnimation', [
80-
state(
81-
'*',
82-
style({ zIndex: 1, opacity: 1 })
83-
),
84-
transition(
85-
toLeft,
86-
group([
87-
query(
88-
':leave',
89-
[
90-
animate(
91-
'0.6s ease-in-out',
92-
style({
93-
zIndex: 0,
94-
opacity: 0,
95-
})
96-
),
97-
],
98-
{ optional: true }
99-
),
100-
query(
101-
':enter',
102-
[
73+
export const fadeAnimationLeft = animation(
74+
group([
75+
query(
76+
':leave',
77+
[
78+
animate(
79+
'0.9s ease-in-out',
10380
style({
104-
zIndex: 1,
105-
opacity: 1
106-
}),
107-
animate('0.6s ease-in-out', style('*')),
108-
],
109-
{ optional: true }
110-
),
111-
])
112-
),
113-
transition(
114-
toRight,
115-
group([
116-
query(
117-
':enter',
118-
[
81+
zIndex: 0,
82+
opacity: 0
83+
})
84+
)
85+
],
86+
{ optional: true }
87+
),
88+
query(
89+
':enter',
90+
[
91+
style({
92+
zIndex: 1,
93+
opacity: 1
94+
}),
95+
animate('0.6s ease-in-out', style('*'))
96+
],
97+
{ optional: true }
98+
)
99+
])
100+
);
101+
export const fadeAnimationRight = animation(
102+
group([
103+
query(
104+
':enter',
105+
[
106+
style({
107+
zIndex: 1,
108+
opacity: 1
109+
}),
110+
animate('0.6s ease-in-out', style('*'))
111+
],
112+
{ optional: true }
113+
),
114+
query(
115+
':leave',
116+
[
117+
animate(
118+
'0.9s ease-in-out',
119119
style({
120-
zIndex: 1,
121-
opacity: 1
122-
}),
123-
animate('0.6s ease-in-out', style('*')),
124-
],
125-
{ optional: true }
126-
),
127-
query(
128-
':leave',
129-
[
130-
animate(
131-
'0.6s ease-in-out',
132-
style({
133-
zIndex: 0,
134-
opacity: 0,
135-
})
136-
),
137-
],
138-
{ optional: true }
139-
),
140-
])
141-
),
120+
zIndex: 0,
121+
opacity: 0
122+
})
123+
)
124+
],
125+
{ optional: true }
126+
)
127+
])
128+
);
129+
130+
export const carouselPlay = trigger('carouselPlay', [
131+
state('*', style({ transform: 'translateX(0)', display: 'block', opacity: 1 })),
132+
transition(toFadeLeft, useAnimation(fadeAnimationLeft)),
133+
transition(toFadeRight, useAnimation(fadeAnimationRight)),
134+
transition(toSlideLeft, useAnimation(slideAnimationLeft)),
135+
transition(toSlideRight, useAnimation(slideAnimationRight))
142136
]);

‎projects/coreui-angular/src/lib/carousel/carousel/carousel.component.ts‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ import { CarouselConfig } from '../carousel.config';
3232
exportAs: 'cCarousel',
3333
host: {
3434
class: 'carousel slide',
35-
'[class.carousel-fade]': 'transition() === "crossfade"'
35+
'[class.carousel-fade]': 'transition() === "crossfade" && animate()'
3636
}
3737
})
3838
export class CarouselComponent implements OnInit, OnDestroy, AfterContentInit {
@@ -148,7 +148,11 @@ export class CarouselComponent implements OnInit, OnDestroy, AfterContentInit {
148148

149149
ngAfterContentInit(): void {
150150
this.intersectionServiceSubscribe();
151-
this.#carouselState.state = { activeItemIndex: this.activeIndex(), animate: this.animate() };
151+
this.#carouselState.state = {
152+
activeItemIndex: this.activeIndex(),
153+
animate: this.animate(),
154+
transition: this.transition()
155+
};
152156
this.setListeners();
153157
this.swipeSubscribe();
154158
}

0 commit comments

Comments
 (0)