跟讀練習: Transition to and from display: none - 通過影片學習英語口語

選擇練習模式

每種模式都會開啟全屏練習室。

85 句

如果句子過短或過長，請點選 Edit 進行調整。

Hello, my friend and friend, if you've ever needed to transition something in and out in different ways, depending what it is,

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.

It just takes one property and one new at rule

and we can pull something like this off or do much fancier things if you'd like as well.

So if you'd like to know how to do this, well, then let's dive right into it.

All right.

So how do we do this?

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.

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.

And then all the way back up here, the invoker command for my newsletter modal is doing a show modal.

Invoker commands are in all browsers now, but it's relatively new.

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.

And of course, you don't have to be doing this with a dialog.

This would work with anything where you're going from a display of none to a display of grid.

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.

If you don't know what a discrete animation is, I'll put a link to the MDM to explain that.

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.

And this means you can take something that is a discrete animation and we're allowed to transition it.

Does not work when we open it, but look at that.

It fades away when I'm closing it, which is amazing.

A little bit frustrating that's only in one direction.

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.

And so it lives here it didn't know what existed before

but when i'm closing it it's going oh we're doing our transition behavior of allow discrete

so i'm going to let my display property stay as the grid for two seconds

while the other animations or transitions are running so i'm saying animations

but transitions in this case are going to run

so the opacity is going to work and we can do other stuff

which we'll see in a second as well

so how do we get this to actually work the other

way around we're on our open state at the end of the open state

and this is really important that it comes after and not before

which is annoying the order of things we do an at starting style

and this is a new at rule

that we have for exactly what we want to do here

where i want to start with an opacity of zero

and now it will transition in and it will transition back out fantastic right So the order here is important.

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.

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.

At least this part does.

The from open to closed maybe could be the other way around.

But again, this probably makes the most sense.

So we're going, this is my closed state.

This is my open state.

And then the transition phase here before the animation starts.

If you put this earlier, it will not work because of the way the cascade works.

And the last rule wins, just like with a media query or anything else.

So the cool thing with starting style, because if you're just doing this, I mean, it works.

It's fine.

It's one literally, well, a one-liner.

Let's make it a one-liner.

So I'm not lying.

There we go.

It's now a one-liner.

But the nice thing with starting style is we can do a little bit more with it.

So let's also here, I'm going to add two lines actually.

I'm going to add an overlay.

I don't necessarily need it in this case, but with modals or dialogue, if you're doing popovers too,

this could be useful because this is dealing with the top layer

and can be useful and we also have our backdrop it might be associated with

that but I might be wrong on that one

but I also want to add a translate here as well

so we're going to do our opacity our display

and overlay are just getting thrown on here to make sure everything works

and then the translate is getting added at the end

so what I can do is let's come here and

so we're going to do a translate of 0 50 pixels which is it's gonna move it down a little bit.

Then we're gonna have a translate of a 0, 0.

And on the starting style, let's come in with a translate of a 0, negative 50 pixels.

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.

The last thing, just really quickly, you might have noticed my backdrop is not actually transitioning or animating, which is a little bit weird.

What I would do if you have a backdrop or something like this

is just throw an opacity of zero on it for the regular state.

Then when our modal is opened,

this could have an and backdrop of opacity of one and then and backdrop opacity of zero.

And you guessed it.

We just come here and do a transition opacity two seconds.

And in doing that, when it opens, you can see because the opacity is changing,

the filter ends up actually sort of transitioning back and forth at the same time as well.

So this is like the easiest way is just playing with the opacity on backdrops

or other things like that that you have at your disposal.

And yeah, just like that, we're now transitioning to and from a display of none.

It's fantastically easy to do.

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.

And of course, until next time, don't forget to make your corner of the internet just a little bit more awesome.

下載應用

流利口語所需的一切

AI 發音評分逐句打分

音標練習掌握每個音

詞彙學習建立你的詞庫

詞彙遊戲邊玩邊學

掃碼

Download on theApp Store Get it onGoogle Play

同頻道

FOR YOU

本課的詞彙與口語要點

這節 C1 級別的口語課以影片“Transition to and from display: none”為素材。影片中反覆出現的詞有：transition, display, opacity, animation, backdrop。這段影片共有 85 個句子、1178 個單詞可供跟讀。講話部分時長為 5:29。說話人語速較快，每分鐘約 215 個詞，會出現較多連讀和弱讀。 85% 的單詞屬於英語最常用的 3,000 詞，其餘的詞建議在練習前先學一下。

影片中的重點詞彙

影片中最難的 12 個單詞，附發音和釋義：

單詞	發音	釋義
backdrop 名詞	/ˈbæk.dɹɑp/	背景幕
translate 動詞	/tɹænzˈleɪt/	翻譯 /翻譯, 譯 /譯
liner 名詞	/ˈlaɪnɚ/	郵船 /郵船
fantastically 副詞		奇特地, 難以置信地 /難以置信地
pixel 名詞	/ˈpɪk.səl/	畫素
newsletter 名詞	/ˈn(j)uzˌlɛtɚ/	實事通訊 /實事通訊
animate 形容詞	/ˈæn.ə.mət/	活的, 有生命的
cascade 名詞	/kæsˈkeɪd/	瀑布
frustrate 動詞	/ˈfɹʌsˌtɹeɪt/	令人失望, 挫折
query 名詞	/ˈkwɪɹ.i/	問題 /問題, 質問 /質問
scroll 名詞	/skɹoʊl/	條幅 /條幅, 卷軸 /卷軸
fade 動詞	/feɪd/	衰落, 枯萎

影片中出現的短語動詞

單詞	釋義
end up 動詞	到達

影片中的語法

說話人最常用的結構，並附上影片中的原話：

結構	影片中的用法
條件句 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

需要注意的發音

說話人用了 41 次縮略和弱讀形式，例如 we're, I'm, don't。請按聽到的簡短形式來說。

如何用這段影片練習

先完整聽一遍影片，不要開口，記下不認識的單詞。
先用 0.75 倍速逐句跟讀，熟練之後再回到正常速度。
錄下自己的聲音並與原聲對比，特別注意 backdrop, translate, liner 這類單詞。

什麼是跟讀法？

跟讀法 (Shadowing) 是一種有科學依據的語言學習技巧，最初開發用於專業口譯員的培訓，並由多語言者Alexander Arguelles博士普及。這個方法簡單而強大：您在聽英語母語原聲的同時立即大聲重複——就像是一個延遲1-2秒緊跟說話者的影子。與被動聽力或語法練習不同，跟讀法強迫您的大腦和口腔肌肉同時處理並模模擬實的講話模式。研究表明它能顯著提高發音準確性，語調，節奏，連讀，聽力理解和口語流利度——使其成為雅思口語備考和真實英語交流最有效的方法之一。

影子跟讀法: 閱讀完整分步指南 →

跟讀練習: Transition to and from display: none - 通過影片學習英語口語

選擇練習模式

下載應用

同頻道

Handy CSS layout patterns, and fun ways to elevate them

Use these CSS features instead of JavaScript

Your AI broke the layout. Now what?

This library changes how JS and CSS work together

No more magic numbers for your breakpoints

More CSS quick tips

Native popovers with smooth animations (no JS required)

3 modern CSS properties to add to your reset

5 CSS fouls that I see way too often

Has AI killed Tailwind?

Why I use single-color gradients in my CSS

Build smarter color systems with relative colors

推薦影片

Diodes Explained - The basics how diodes work working principle pn junction

Are you scared of change? - Motivational video [Feat Peter Dinklage]

The future unfolds! How to optimize Android apps for adaptive layouts

How I Learned Procedural Generation

DVD04 1 Connected Speech 06 Verbal Phrases Direct Link YouTube

Video

How to keep any conversation going #conversation #conversationstarters #socialskills

Give Me 15 Minutes. I'll Teach You 80% of Obsidian

Animation Basics in 14 Minutes (6 Big ideas for beginners)

People Order Coffee, I Serve Them Suffering - Espresso Tycoon