File tree Expand file tree Collapse file tree 2 files changed +25
-2
lines changed
streams-react/src/components/ChatContainer Expand file tree Collapse file tree 2 files changed +25
-2
lines changed Original file line number Diff line number Diff line change @@ -30,7 +30,7 @@ const ChatContainer = () => {
30
30
< div ref = { containerRef } className = { `${ styles . container } ${ isChatOpen ? styles [ "container--on" ] : "" } ` } >
31
31
< button type = "button" className = { styles . chat__button } onClick = { handleClick } >
32
32
< i className = { `fas fa-chevron-left ${ styles . chevron } ${ isChatOpen ? styles [ "chevron--open" ] : styles . hidden } ` } > </ i >
33
- < i className = { `fas fa-chevron-right ${ styles . chevron } ${ isChatOpen ? styles . hidden : styles [ "chevron--open " ] } ` } > </ i >
33
+ < i className = { `fas fa-chevron-right ${ styles . chevron } ${ isChatOpen ? styles . hidden : styles [ "chevron--closed " ] } ` } > </ i >
34
34
</ button >
35
35
< div className = { `${ styles . chat__container } ${ isChatOpen ? "" : styles [ "chat__container--closed" ] } ` } >
36
36
< ChatList />
Original file line number Diff line number Diff line change 45
45
animation : rotateChevron 0.85s ease-in forwards;
46
46
}
47
47
.chevron--closed {
48
- animation : rotateChevron 0.85s ease-in forwards;
48
+ animation : rotateChevron 0.85s ease-in forwards, clickMe 3.8 s 1.7 s infinite ;
49
49
}
50
50
.hidden {
51
51
display : none;
69
69
100% {
70
70
transform : rotateZ (180deg );
71
71
}
72
+ }
73
+ @keyframes clickMe {
74
+ 0% {
75
+ transform : rotateZ (180deg );
76
+ }
77
+ 72% {
78
+ transform : rotateZ (180deg );
79
+ }
80
+ 75% {
81
+ transform : rotateZ (210deg );
82
+ }
83
+ 78% {
84
+ transform : rotateZ (160deg );
85
+ }
86
+ 82% {
87
+ transform : rotateZ (188deg );
88
+ }
89
+ 84% {
90
+ transform : rotateZ (175deg );
91
+ }
92
+ 100% {
93
+ transform : rotate (180deg );
94
+ }
72
95
}
You can’t perform that action at this time.
0 commit comments