質問編集履歴

2

文法の修正

2020/09/21 04:42

投稿

YUOKAWARA
YUOKAWARA

スコア1

test CHANGED
File without changes
test CHANGED
@@ -22,196 +22,198 @@
22
22
 
23
23
  ### 該当のソースコード
24
24
 
25
- ```index.vue
25
+ ```
26
26
 
27
27
 
28
28
 
29
29
  コード
30
30
 
31
+ <v-col>
32
+
33
+ <v-row justify="center">
34
+
35
+ <template>
36
+
37
+ <v-card>
38
+
39
+ <transition mode="out-in">
40
+
41
+ <div v-if="this.show">
42
+
43
+ <v-list class="welcome">
44
+
45
+ <v-list-item>
46
+
47
+ <v-list-item-avatar>
48
+
49
+ <img src="~/assets/craphands.jpg" />
50
+
51
+ </v-list-item-avatar>
52
+
53
+ <v-list-item-content>
54
+
55
+ <v-list-item-title>テストお客様</v-list-item-title>
56
+
57
+ </v-list-item-content>
58
+
59
+ </v-list-item>
60
+
61
+ </v-list>
62
+
63
+ </div>
64
+
65
+ </transition>
66
+
67
+ <button v-on:click="display()">ボタン</button>
68
+
69
+ </v-card>
70
+
71
+ </template>
72
+
73
+ </v-row>
74
+
75
+ </v-col>
76
+
77
+
78
+
79
+ <script>
80
+
81
+ data: () => ({
82
+
83
+ show: false,
84
+
85
+ })
86
+
87
+
88
+
89
+ methods: {
90
+
91
+ display: function welanime() {
92
+
93
+ console.log('iwehfoiwhe')
94
+
95
+ this.show = !this.show
96
+
97
+
98
+
99
+ setTimeout(() => {
100
+
101
+ this.show = false
102
+
103
+ }, 3000)
104
+
105
+
106
+
107
+ function intTim() {
108
+
109
+ var wtm = 5000
110
+
111
+ setInterval(welanime, wtm)
112
+
113
+
114
+
115
+ }
116
+
117
+ intTim();
118
+
119
+
120
+
121
+ },
122
+
123
+ }
124
+
125
+ </script>
126
+
127
+ <style scoped>
128
+
129
+ .welcome {
130
+
131
+ background-color: rgb(133, 191, 238);
132
+
133
+ }
134
+
135
+
136
+
137
+ .show-enter-active {
138
+
139
+ transition: opacity 1s;
140
+
141
+ }
142
+
143
+
144
+
145
+ .show-enter {
146
+
147
+ opacity: 0;
148
+
149
+ }
150
+
151
+
152
+
153
+ .v-enter-active {
154
+
155
+ transition: all 1s ease 0s;
156
+
157
+ }
158
+
159
+
160
+
161
+ .v-leave-active {
162
+
163
+ transition: all 0.3s ease 0s;
164
+
165
+ }
166
+
167
+
168
+
169
+ .v-leave-active {
170
+
171
+ position: absolute;
172
+
173
+ }
174
+
175
+
176
+
177
+ .v-enter,
178
+
179
+ .v-leave-to {
180
+
181
+ opacity: 0;
182
+
183
+ }
184
+
185
+
186
+
187
+ .v-enter {
188
+
189
+ transform: translateX(60px);
190
+
191
+ }
192
+
193
+
194
+
195
+ .v-enter-to,
196
+
197
+ .v-leave {
198
+
199
+ transform: translateX(0);
200
+
201
+ }
202
+
203
+
204
+
205
+ .v-leave-to {
206
+
207
+ transform: translateY(-60px);
208
+
209
+ }
210
+
211
+ </style>
212
+
213
+
214
+
31
215
  ```
32
216
 
33
- <v-col>
34
-
35
- <v-row justify="center">
36
-
37
- <template>
38
-
39
- <v-card>
40
-
41
- <transition mode="out-in">
42
-
43
- <div v-if="this.show">
44
-
45
- <v-list class="welcome">
46
-
47
- <v-list-item>
48
-
49
- <v-list-item-avatar>
50
-
51
- <img src="~/assets/craphands.jpg" />
52
-
53
- </v-list-item-avatar>
54
-
55
- <v-list-item-content>
56
-
57
- <v-list-item-title>テストお客様</v-list-item-title>
58
-
59
- </v-list-item-content>
60
-
61
- </v-list-item>
62
-
63
- </v-list>
64
-
65
- </div>
66
-
67
- </transition>
68
-
69
- <button v-on:click="display()">ボタン</button>
70
-
71
- </v-card>
72
-
73
- </template>
74
-
75
- </v-row>
76
-
77
- </v-col>
78
-
79
-
80
-
81
- <script>
82
-
83
- data: () => ({
84
-
85
- show: false,
86
-
87
- })
88
-
89
-
90
-
91
- methods: {
92
-
93
- display: function welanime() {
94
-
95
- console.log('iwehfoiwhe')
96
-
97
- this.show = !this.show
98
-
99
-
100
-
101
- setTimeout(() => {
102
-
103
- this.show = false
104
-
105
- }, 3000)
106
-
107
-
108
-
109
- function intTim() {
110
-
111
- var wtm = 5000
112
-
113
- setInterval(welanime, wtm)
114
-
115
-
116
-
117
- }
118
-
119
- intTim();
120
-
121
-
122
-
123
- },
124
-
125
- }
126
-
127
- </script>
128
-
129
- <style scoped>
130
-
131
- .welcome {
132
-
133
- background-color: rgb(133, 191, 238);
134
-
135
- }
136
-
137
-
138
-
139
- .show-enter-active {
140
-
141
- transition: opacity 1s;
142
-
143
- }
144
-
145
-
146
-
147
- .show-enter {
148
-
149
- opacity: 0;
150
-
151
- }
152
-
153
-
154
-
155
- .v-enter-active {
156
-
157
- transition: all 1s ease 0s;
158
-
159
- }
160
-
161
-
162
-
163
- .v-leave-active {
164
-
165
- transition: all 0.3s ease 0s;
166
-
167
- }
168
-
169
-
170
-
171
- .v-leave-active {
172
-
173
- position: absolute;
174
-
175
- }
176
-
177
-
178
-
179
- .v-enter,
180
-
181
- .v-leave-to {
182
-
183
- opacity: 0;
184
-
185
- }
186
-
187
-
188
-
189
- .v-enter {
190
-
191
- transform: translateX(60px);
192
-
193
- }
194
-
195
-
196
-
197
- .v-enter-to,
198
-
199
- .v-leave {
200
-
201
- transform: translateX(0);
202
-
203
- }
204
-
205
-
206
-
207
- .v-leave-to {
208
-
209
- transform: translateY(-60px);
210
-
211
- }
212
-
213
- </style>
214
-
215
217
 
216
218
 
217
219
  ### 試したこと

1

文法の修正

2020/09/21 04:42

投稿

YUOKAWARA
YUOKAWARA

スコア1

test CHANGED
File without changes
test CHANGED
@@ -22,9 +22,13 @@
22
22
 
23
23
  ### 該当のソースコード
24
24
 
25
- index.vue
25
+ ```index.vue
26
+
27
+
28
+
26
-
29
+ コード
30
+
27
-
31
+ ```
28
32
 
29
33
  <v-col>
30
34
 
@@ -210,8 +214,6 @@
210
214
 
211
215
 
212
216
 
213
-
214
-
215
217
  ### 試したこと
216
218
 
217
219
  console.logを記述しデバッグをしながら作業。