Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Appearance settings

Commit ba6864a

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

File tree

Expand file treeCollapse file tree

4 files changed

+152
-144
lines changed
Filter options
Expand file treeCollapse file tree

4 files changed

+152
-144
lines changed

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

Copy file name to clipboardExpand all lines: projects/coreui-angular/src/lib/carousel/carousel-inner/carousel-inner.component.html
-3Lines changed: 0 additions & 3 deletions
This file was deleted.

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

Copy file name to clipboardExpand all lines: projects/coreui-angular/src/lib/carousel/carousel-inner/carousel-inner.component.ts
+20-7Lines 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

Copy file name to clipboard
+126-132Lines 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

Copy file name to clipboardExpand all lines: projects/coreui-angular/src/lib/carousel/carousel/carousel.component.ts
+6-2Lines 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 (0)
Morty Proxy This is a proxified and sanitized view of the page, visit original site.