쉐도잉 연습: Transition to and from display: none - 영상으로 영어 말하기 배우기

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.

📺 같은 채널

✨ 추천 영상

137 문장

How to Disappear and Transform Yourself

Business EnglishUniversity StudentsWorking Adults

28 문장

GATHERING IN THE DIGITAL ERA

Business EnglishUniversity StudentsWorking Adults

132 문장

Video

Business EnglishUniversity StudentsWorking Adults

119 문장

Basic Opt Flw regimes

Business EnglishUniversity StudentsWorking Adults

63 문장

Learn Figma Motion in 8 minutes

Business EnglishUniversity StudentsWorking Adults

91 문장

Directing Without Words: Visual Storytelling in Film

Business EnglishUniversity StudentsWorking Adults

23 문장

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

Business EnglishUniversity StudentsWorking Adults

108 문장

How I Learned Procedural Generation

Business EnglishUniversity StudentsWorking Adults

162 문장

The Simplest Way to Connect Claude and Power BI

Business EnglishUniversity StudentsWorking Adults

257 문장

Learn Next.js Parallel Routes In 16 Minutes

Business EnglishUniversity StudentsWorking Adults

Vocabulary and speaking notes for this lesson

This C1 speaking lesson is built on the video “Transition to and from display: none”. The speaker keeps coming back to these words: transition, display, opacity, animation, backdrop. This video has 85 sentences and 1178 words to shadow. The speech runs for 5:29. The speaker talks fast, about 215 words per minute, so expect linked and reduced sounds. 85% of the words are among the 3,000 most common in English; the rest is worth studying before you start.

Key vocabulary in this video

The 15 most advanced words in the video, with pronunciation and meaning:

Word	Pronunciation	Meaning
opacity noun	/oʊˈpæsɪti/	The state or quality of being opaque, not allowing light to pass through.
backdrop noun	/ˈbæk.dɹɑp/	A decorated cloth hung at the back of a stage.
discreet adjective	/dɪˈskɹiːt/	Respectful of privacy or secrecy; exercising caution in order to avoid causing embarrassment; quiet; diplomatic.
modal adjective	/ˈməʊdəl/	Of, or relating to a mode or modus.
translate verb	/tɹænzˈleɪt/	To change spoken words or written text (of a book, document, movie, etc.) from one language to another.
liner noun	/ˈlaɪnɚ/	A large passenger-carrying ship, especially one on a regular route; an ocean liner.
invoker noun		One who calls upon (a person, especially a god) for help, assistance or guidance.
fantastically adverb		In a fantastic manner.
overlay verb	/ˌoʊvɚˈleɪ/	To lay, spread, or apply (something) over or across (something else); to overspread.
pixel noun	/ˈpɪk.səl/	One of the tiny dots that make up the representation of an image in a computer's memory.
newsletter noun	/ˈn(j)uzˌlɛtɚ/	A periodically sent publication containing current events or the like, generally on a particular topic or geared toward a limited audience.
animate adjective	/ˈæn.ə.mət/	That lives.
cascade noun	/kæsˈkeɪd/	A waterfall or series of small waterfalls.
enabler noun		One who or that which helps something to happen.
frustrate verb	/ˈfɹʌsˌtɹeɪt/	To disappoint or defeat; to vex by depriving of something expected or desired.

Phrasal verbs you will hear

Word	Pronunciation	Meaning
back out verb		To reverse (a vehicle) from a confined space.
back up verb		To move backwards, especially for a vehicle to do so.
end up verb		To bring to a conclusion.
set up verb	/ˌsɛt ˈʌp/	To make ready for use.

이 영상의 문법

화자가 가장 많이 쓰는 문형을 영상 속 실제 표현과 함께 정리했습니다.

문형	영상 속 표현
조건문 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

Pronunciation to watch

The speaker uses 41 contractions and reduced forms, such as we're, I'm, don't. Say them the short way, as you hear them.

How to practise with this video

Listen to the whole video once without speaking and note the words you do not know.
Start at 0.75× speed, shadow it sentence by sentence, then go back to normal speed once it feels easy.
Record yourself and compare with the original, paying attention to words like opacity, backdrop, discreet.

쉐도잉이란? 영어 실력을 빠르게 키우는 과학적 방법

쉐도잉(Shadowing)은 원래 전문 통역사 훈련을 위해 개발된 언어 학습 기법으로, 다언어 학자인 Dr. Alexander Arguelles에 의해 대중화된 방법입니다. 핵심 원리는 간단하지만 매우 강력합니다: 원어민의 영어를 들으면서 1~2초의 짧은 지연으로 즉시 소리 내어 따라 말하는 것——마치 '그림자(shadow)'처럼 화자를 따라가는 것입니다. 문법 공부나 수동적인 청취와 달리, 쉐도잉은 뇌와 입 근육이 동시에 실시간으로 영어를 처리하고 재현하도록 훈련합니다. 연구에 따르면 이 방법은 발음 정확도, 억양, 리듬, 연음, 청취력, 말하기 유창성을 크게 향상시킵니다. IELTS 스피킹 준비와 자연스러운 영어 소통을 원하는 분들에게 특히 효과적입니다.

섀도잉 방법: 단계별 전체 가이드 읽기 →

쉐도잉 연습: 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

How to Disappear and Transform Yourself

GATHERING IN THE DIGITAL ERA

Video

Basic Opt Flw regimes

Learn Figma Motion in 8 minutes

Directing Without Words: Visual Storytelling in Film

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

How I Learned Procedural Generation

The Simplest Way to Connect Claude and Power BI

Learn Next.js Parallel Routes In 16 Minutes

Vocabulary and speaking notes for this lesson

Key vocabulary in this video

Phrasal verbs you will hear

이 영상의 문법

Pronunciation to watch

How to practise with this video

쉐도잉이란? 영어 실력을 빠르게 키우는 과학적 방법