teratail header banner
teratail header banner
質問するログイン新規登録

回答編集履歴

2

コード追記

2021/11/06 13:20

投稿

hatena19
hatena19

スコア34367

answer CHANGED
@@ -36,4 +36,17 @@
36
36
  scrollButton.addEventListener('click', function(){
37
37
  this.classList.toggle('reflect');
38
38
  });
39
- ```
39
+ ```
40
+
41
+ ---
42
+ 正解は下記でした。
43
+
44
+ ```css
45
+ .c-scroll-button i {
46
+ transition: transform 500ms ease-out;
47
+ }
48
+ .c-scroll-button.reflect i {
49
+ transform: scale(-1, 1);
50
+ }
51
+ ```
52
+ スクリプトは上と同じ。

1

コード追記

2021/11/06 13:20

投稿

hatena19
hatena19

スコア34367

answer CHANGED
@@ -1,9 +1,11 @@
1
1
  やりたいことは下記のようなことかな?
2
2
 
3
3
  ```css
4
+ .c-scroll-button i {
5
+ transition: transform 500ms ease-out;
6
+ }
4
7
  .c-scroll-button i.reflect{
5
8
  transform: scale(-1, 1);
6
- transition: transform 500ms ease-out;
7
9
  }
8
10
  ```
9
11
 
@@ -15,4 +17,23 @@
15
17
  this.classList.toggle('reflect');
16
18
  });
17
19
  });
20
+ ```
21
+
22
+ ---
23
+ それともこちらか?
24
+
25
+ ```css
26
+ .c-scroll-button {
27
+ transition: transform 500ms ease-out;
28
+ }
29
+ .c-scroll-button.reflect{
30
+ transform: scale(-1, 1);
31
+ }
32
+ ```
33
+ ```js
34
+ const scrollButton = document.querySelector('.c-scroll-button');
35
+
36
+ scrollButton.addEventListener('click', function(){
37
+ this.classList.toggle('reflect');
38
+ });
18
39
  ```