シャドーイング練習: Transition to and from display: none - 動画で英語スピーキングを学ぶ
レッスンを作成中...
1
Hello, my friend and friend, if you've ever needed to transition something in and out in different ways, depending what it is,
2
but you're going from a display of none to a display of something else doesn't actually work in CSS, except now it does.
3
It just takes one property and one new at rule
4
and we can pull something like this off or do much fancier things if you'd like as well.
5
So if you'd like to know how to do this, well, then let's dive right into it.
6
All right.
7
So how do we do this?
8
Well, you can see here, I'm first of all opening and closing things with this button that's right here, which I'm using invoker commands for with a dialog.
9
So if I scroll all the way down to the bottom, I have a dialog set up here that has an ID on it of my newsletter modal.
10
And then all the way back up here, the invoker command for my newsletter modal is doing a show modal.
11
Invoker commands are in all browsers now, but it's relatively new.
12
So if you want to be a little bit safer, you can do the same thing using a little bit of JavaScript and that works fantastically well without any issues.
13
And of course, you don't have to be doing this with a dialog.
14
This would work with anything where you're going from a display of none to a display of grid.
15
And what we want to do is do this transition, and I can't do it because normally you can't do a transition on a discrete animation, which is what display is.
16
If you don't know what a discrete animation is, I'll put a link to the MDM to explain that.
17
But the fix is doing, or the first fix, because we need two fixes, they're both one-liners basically, a transition behavior of allow discrete.
18
And this means you can take something that is a discrete animation and we're allowed to transition it.
19
Does not work when we open it, but look at that.
20
It fades away when I'm closing it, which is amazing.
21
A little bit frustrating that's only in one direction.
22
And that's just because when we go from a display of none to the display of grid, it's instantly getting to this state.
23
And so it lives here it didn't know what existed before
24
but when i'm closing it it's going oh we're doing our transition behavior of allow discrete
25
so i'm going to let my display property stay as the grid for two seconds
26
while the other animations or transitions are running so i'm saying animations
27
but transitions in this case are going to run
28
so the opacity is going to work and we can do other stuff
29
which we'll see in a second as well
30
so how do we get this to actually work the other
31
way around we're on our open state at the end of the open state
32
and this is really important that it comes after and not before
33
which is annoying the order of things we do an at starting style
34
and this is a new at rule
35
that we have for exactly what we want to do here
36
where i want to start with an opacity of zero
37
and now it will transition in and it will transition back out fantastic right So the order here is important.
38
We're doing the closed state, then we're doing the open state, and then we're doing the from closed state to open state.
39
And it's a little bit weird, maybe leave some comments, but it does need to be in that specific order for it to work properly.
40
At least this part does.
41
The from open to closed maybe could be the other way around.
42
But again, this probably makes the most sense.
43
So we're going, this is my closed state.
44
This is my open state.
45
And then the transition phase here before the animation starts.
46
If you put this earlier, it will not work because of the way the cascade works.
47
And the last rule wins, just like with a media query or anything else.
48
So the cool thing with starting style, because if you're just doing this, I mean, it works.
49
It's fine.
50
It's one literally, well, a one-liner.
51
Let's make it a one-liner.
52
So I'm not lying.
53
There we go.
54
It's now a one-liner.
55
But the nice thing with starting style is we can do a little bit more with it.
56
So let's also here, I'm going to add two lines actually.
57
I'm going to add an overlay.
58
I don't necessarily need it in this case, but with modals or dialogue, if you're doing popovers too,
59
this could be useful because this is dealing with the top layer
60
and can be useful and we also have our backdrop it might be associated with
61
that but I might be wrong on that one
62
but I also want to add a translate here as well
63
so we're going to do our opacity our display
64
and overlay are just getting thrown on here to make sure everything works
65
and then the translate is getting added at the end
66
so what I can do is let's come here and
67
so we're going to do a translate of 0 50 pixels which is it's gonna move it down a little bit.
68
Then we're gonna have a translate of a 0, 0.
69
And on the starting style, let's come in with a translate of a 0, negative 50 pixels.
70
And this is one of the things I like about starting style, is it means we can have an entry animation and an exit animation, and they can be different from one another.
71
The last thing, just really quickly, you might have noticed my backdrop is not actually transitioning or animating, which is a little bit weird.
72
What I would do if you have a backdrop or something like this
73
is just throw an opacity of zero on it for the regular state.
74
Then when our modal is opened,
75
this could have an and backdrop of opacity of one and then and backdrop opacity of zero.
76
And you guessed it.
77
We just come here and do a transition opacity two seconds.
78
And in doing that, when it opens, you can see because the opacity is changing,
79
the filter ends up actually sort of transitioning back and forth at the same time as well.
80
So this is like the easiest way is just playing with the opacity on backdrops
81
or other things like that that you have at your disposal.
82
And yeah, just like that, we're now transitioning to and from a display of none.
83
It's fantastically easy to do.
84
And with that, I'm going to say a very big thank you to my enabler of Awesome Johnny, as well as all my other patrons and channel members for their monthly support.
85
And of course, until next time, don't forget to make your corner of the internet just a little bit more awesome.
📺 同じチャンネル
C14
Handy CSS layout patterns, and fun ways to elevate them
Business EnglishUniversity StudentsWorking Adults
B22
Use these CSS features instead of JavaScript
Business EnglishUniversity StudentsWorking Adults
C15
Your AI broke the layout. Now what?
Business EnglishUniversity StudentsWorking Adults
B24
This library changes how JS and CSS work together
Business EnglishUniversity StudentsWorking Adults
B27
No more magic numbers for your breakpoints
Business EnglishUniversity StudentsWorking Adults
C14
More CSS quick tips
Business EnglishUniversity StudentsWorking Adults
C12
Native popovers with smooth animations (no JS required)
Business EnglishUniversity StudentsWorking Adults
C13
3 modern CSS properties to add to your reset
Business EnglishUniversity StudentsWorking Adults
C13
5 CSS fouls that I see way too often
Business EnglishUniversity StudentsWorking Adults
B24
Has AI killed Tailwind?
Business EnglishUniversity StudentsWorking Adults
C17
Why I use single-color gradients in my CSS
Business EnglishUniversity StudentsWorking Adults
C14
Build smarter color systems with relative colors
Business EnglishUniversity StudentsWorking Adults
✨ おすすめ動画
C12
91 文
Directing Without Words: Visual Storytelling in Film
Business EnglishUniversity StudentsWorking Adults
C128 文
GATHERING IN THE DIGITAL ERA
Business EnglishUniversity StudentsWorking Adults
C11
132 文
Video
Business EnglishUniversity StudentsWorking Adults
B21
119 文
Basic Opt Flw regimes
Business EnglishUniversity StudentsWorking Adults
C12
63 文
Learn Figma Motion in 8 minutes
Business EnglishUniversity StudentsWorking Adults
C115
23 文
The future unfolds! How to optimize Android apps for adaptive layouts
Business EnglishUniversity StudentsWorking Adults
B21
137 文
How to Get Anyone to Talk to You First (Without Begging for Attention)
Business EnglishDaily ConversationUniversity Students
C11
108 文
How I Learned Procedural Generation
Business EnglishUniversity StudentsWorking Adults
C11
162 文
The Simplest Way to Connect Claude and Power BI
Business EnglishUniversity StudentsWorking Adults
C13
257 文
Learn Next.js Parallel Routes In 16 Minutes
Business EnglishUniversity StudentsWorking Adults
このレッスンの語彙とスピーキングのポイント
このC1レベルのスピーキングレッスンは、動画「Transition to and from display: none」を教材にしています。 繰り返し出てくる語は次のとおりです：transition, display, opacity, animation, backdrop。 この動画には、シャドーイング用の文が85文、単語が1178語あります。 音声の長さは5:29です。 話す速さは速く、1分あたり約215語です。音のつながりや弱く発音される音が多くなります。 単語の85%は英語の頻出3,000語に含まれます。残りは練習の前に確認しておきましょう。
この動画の重要語彙
動画の中で特に難しい単語9語を、発音と意味つきで紹介します。
| 単語 | 発音 | 意味 |
|---|---|---|
| translate 動詞 | /tɹænzˈleɪt/ | 訳す, 翻訳する |
| liner 名詞 | /ˈlaɪnɚ/ | ライナー |
| overlay 動詞 | /ˌoʊvɚˈleɪ/ | 乗せる, 被せる |
| pixel 名詞 | /ˈpɪk.səl/ | ピクセル, 画素 |
| newsletter 名詞 | /ˈn(j)uzˌlɛtɚ/ | ニュースレター |
| query 名詞 | /ˈkwɪɹ.i/ | 質問 |
| patron 名詞 | /ˈpeɪ.tɹən/ | 守護者 |
| scroll 名詞 | /skɹoʊl/ | 巻物, スクロール |
| fade 動詞 | /feɪd/ | 薄れる |
この動画の文法
話し手がよく使っている文型を、動画の実際の表現とともに紹介します。
| 文型 | 動画での表現 |
|---|---|
| 条件文 if + 節, will/would + 動詞 — 条件とその結果 | If you put this earlier, it will not |
| 受動態 be + 過去分詞 — 誰がするかより、何が起きるかに焦点を当てる | might be associated · is let · is opened |
| 関係詞節 who / which + 節 — 人や物について情報を加える | animation, which is · pixels which is · animating, which is |
注意したい発音
話し手はwe're, I'm, don'tなど、短縮形や弱形を41回使っています。聞こえたとおりの短い形で発音しましょう。
この動画での練習方法
- まず声を出さずに動画を最後まで聞き、知らない単語をメモします。
- まず0.75倍速で一文ずつシャドーイングし、慣れてきたら通常の速度に戻します。
- 自分の声を録音して元の音声と比べます。translate, liner, overlayなどの単語に特に注意しましょう。
シャドーイングとは？英語上達に効果的な理由
シャドーイング（Shadowing）は、もともとプロの通訳者養成プログラムで開発された言語学習法で、多言語習得者として知られるDr. Alexander Arguelles によって広く普及されました。方法はシンプルですが非常に効果的：ネイティブスピーカーの英語を聞きながら、1〜2秒の遅延で声に出してすぐに繰り返す——まるで「影（shadow）」のように話者を追いかけます。文法ドリルや受動的なリスニングと異なり、シャドーイングは脳と口の筋肉が同時にリアルタイムで英語を処理・再現することを強制します。研究により、発音精度、抑揚、リズム、連音、リスニング力、そして会話の流暢さが大幅に向上することが確認されています。IELTSスピーキング対策や自然な英語コミュニケーションを目指す方に特におすすめです。