Prática de Shadowing: Native popovers with smooth animations (no JS required) - Aprenda a falar inglês com o YouTube

⏸ Pausado

If you want to learn how to make a popover like this one

Velocidade:

298 frases

Se as frases estiverem muito curtas ou longas, clique em Edit para ajustá-las.

If you want to learn how to make a popover like this one

that opens and closes with a different transition for when it's opening and closing and no JavaScript at all involved, well, then you're in the right place.

All right, so let's dive in here.

First thing we're going to look at is I have my article, I have this div, whatever, it doesn't matter.

The important thing is the button that I have right here

that I put an outline on it just so we can see it.

And if I come all the way down over here, near the bottom somewhere, I have this author popover div.

completely separate from everything else.

This is one of the cool things with these is you can literally put them anywhere.

It will not have an impact on accessibility for the flow of stuff.

People will be able to get into it through keyboard and everything.

So you put the popovers where you need them to be.

If it makes more sense to put it somewhere else in the DOM, you can, but I just wanted to show that we could do this.

And the important thing is I have this popover attribute on here.

If I remove that, first of all, do this to style it because that will actually let you see

there it vanishes into the ether it's still there just we

can't see it it's hidden away there's some user agent styles making sure

that we can't see it including a display none on there

so what we want is when i click the button we want

that popover to show up so how do we do

that well because this has an id on it of author popover

and i have my popover on there all i need to do on my button is come here

and i write pop over target and let's just put this on another line

so we can see it so i do a And it is say is equal to.

And in this case, it was author popover.

If you have multiple ones, you might, you know, you're adding this in via GS somehow.

GS?

JS somehow.

Whether it's server side rendered or whatever, you can have like the actual name.

So each button is targeting a different popover.

And just by having this on here, if I click on that, it opens.

And I can click anywhere to dismiss it.

So it's a light dismiss.

Clicking anywhere dismisses it.

If I push escape, it also dismisses it.

it I you know my focus is inside of that now so

if you have other focusable things as soon as it's opened

the first thing you will get to is inside of there as you would expect

so that's an important thing to know about.

even though it's later on in the DOM, right?

So this works.

It doesn't look very good, though.

So you probably want to style these a bit differently.

There's some interesting user agent styles that are on here that can actually, for the way you want popovers to generally work, I'm not a huge fan of the user agent styles,

but they're worth looking at.

matter you want that on there anyway.

You can also see it's using position fixed.

It has a position anchor of auto.

That's really interesting.

We'll talk more about what that means in a minute.

We have the width of fit content, a height of fit content, so it's fitting the content.

It has some default colors that are the canvas text in canvas.

In set of zero because it's positioned with a margin of auto, which is why it's centered.

A lot of these things you don't want, especially because of this position anchor of auto that's on there.

And so yeah, let's sort of dive through fix this up a little bit.

And actually I'm going to put a link to an article from Manuel, who I'm not even going to try and say his last name,

but he has a CSS reset that he's created or base, I don't know, he talked about it during CSS day recently,

but in there he actually has like a smart reset type of thing you might want to apply for popovers, uh, that stop some of the default styles from sort of getting in the way.

So the first thing I'm going to say is, though, make sure that you don't do a display here.

So say you need display grid on this, which I am going to be using grid on here.

The problem with throwing display grid on there is you overwrite that user agent style of display none.

So it means it never disappears.

Like I'm clicking, this should be gone.

I'm pushing escape.

You cannot get rid of it.

So you could throw this on there to style it, make it look good.

But once you've done that, just make sure you take the display off.

And we'll talk more about where you put the display in a second.

these styles in here just to give myself a little bit of a same starting point.

So if I click on here, it opens up and it looks a little bit better.

It's still centered on the page, though, which is probably not what you want.

It's not the end of the world.

Maybe you like that and that's completely fine if that's the case.

And it is using position fixed.

So we'll sort of stay in that space.

But we saw with those user agent styles, there's the inset of zero, which means top, bottom, left and right of zero, and a margin of auto.

and because I've given it a size it's just perfectly centered in the viewport.

Again maybe that's what you want but I think this is sort of the things

that I would often overwrite here would be to actually say that it has a margin of zero

and an inset of auto.

And doing that means now when it opens, it's opening top right.

Now again, this isn't perfect.

Popovers have slightly better support than anchor positioning.

So I'm going to be using anchor positioning in this one, which is one of those funny things, actually have it here, where it's going to say limited availability across major browsers,

but it's in all the major browser engines.

And it's just because it's kind of buggy for some stuff.

And they're still fixing in terms of that.

So this could be something where you use the default positioning.

Maybe we'll do that.

Let's do that.

I'm talking about it.

Let's show you how to do that.

So we could say is at supports.

Let's just say anchor name of anchor.

And then we could put in, not all of that, our margin of zero and our inset of auto.

And so that means if this is supported, we'll be able to do our anchor positioning on it.

If this isn't supported, right, that means, let's just comment that out, if it's not supported, it doesn't really break and it just opens in the middle of the screen.

So I think a nice little compromise there for a progressive enhancement along the way.

Now I actually want it to link to where my red button thing is there though.

100

When we click it, it should be a line there.

101

And this is where that anchor name of auto is really cool

102

because it has an implicit anchor to the thing that triggered it and opened it.

103

So this button, it's automatically anchored to this button.

104

So if I have an inside of auto, which just basically means inside of nothing.

105

And now what I can do is come in here and say position area.

106

And I'm going to say this is going to be on the bottom.

107

And because it has that implicit anchor, when I click there, it's on the bottom of my red thing.

108

It's coming out on top of the red line because I used an outline instead of a border.

109

But yeah, it's set up on the bottom.

110

Maybe I don't want it touching the left of the screen.

111

We could add margins around this.

112

I said margin zero.

113

Maybe I want margin of one, just so it's pushed off in every direction by a little bit.

114

Super cool, right?

115

And it's just there.

116

Or maybe I want it to come up on the side over here.

117

I get to say position area is on the right.

118

And then when I click on there, it opens up on the right side.

119

awesome so cool that this works

120

but let's say we wanted it not to open to the right

121

but we actually wanted to open to the top uh what

122

if i do that and i click this it actually covers it

123

because it's trying not to let it overflow right it would stick off the screen

124

if not it's not the end of the world

125

because it's a light dismiss so it's easy to get rid of

126

but it's kind of weird that it covered the content

127

that opened it so you know that's

128

because we're close to the top maybe i want it to open to the top most of the time

129

because let's say like you know there's other stuff on the page So now if I click on that, it's on the top.

130

This makes sense.

131

But then we run in, you know, that sort of sucks.

132

And if I click on it now, now it covers.

133

That's kind of awkward.

134

So what we can do here is a position try and say flip block.

135

Because we're trying to open on the top.

136

I actually want it to flip and open on the bottom.

137

So if I do that, it opens.

138

But look at this.

139

As soon as it runs out of space, it flips over.

140

Boop!

141

That's already pretty cool.

142

But that also means that if I open it, it's opening on the bottom right away because there wasn't enough room on the top.

143

Thank you.

144

It's so cool that we can do this.

145

I also have a margin of one, but let's say I only did the margin on the bottom of one.

146

Right?

147

Because when I was first styling it, I just wanted that margin space here.

148

Not all properties, but some properties will flip along with it.

149

So the margin bottom, when this flips to the other one, is actually putting the margin on the top instead.

150

And of course, this would be the same if I did a block.

151

end we'd get the exact same result so we get the block end margin

152

and then that margin follows through here

153

and of course we probably don't want it touching the side of the page

154

so what we could do is we want position area at top span to the right

155

and that means now it's going to line up with the left side more

156

and span all the way across that way so top

157

but spanning towards the right side which is a nice little touch

158

that we can add to it cool there's a lot more to anchor

159

if you want to dive into more including articles

160

and i don't know if i've done a video on it i don't think i have

161

but i might have if i have i'll put the link to

162

that as well uh but there's going to be some stuff from odd bird

163

that goes into so much more we can do with anchor positioning

164

it is a huge topic but uh what i want to look at now is

165

when we click this or dismiss it

166

or bring it in i don't want to just up here we wanted to do something a little prettier

167

so to be able to do

168

that what we're going to do oh i did want to mention something display grid now before we move on

169

want to change the display type

170

because you want some styling here where you want to do

171

that is in the end uh pop over open

172

which is a new pseudo class that we have so it's

173

when the author pop over is opened we can do a change your display type there

174

so if you want flex

175

or grid i'm going to do a grid grid template columns of an auto one fr

176

and i think we probably want a gap in there too But the display property is the one.

177

So now I get my two columns coming in.

178

Wanted to mention that.

179

So pop over open is what it looks like when it's open.

180

And the reason I thought of that is because I said I wanted to animate everything.

181

So normally we can't do a transition or animation between a display of none, which it has by default, and a display of block.

182

But we can, or grid or anything else.

183

Now we can do that.

184

So let's say by default we want this to actually have an opacity of zero because we want it to fade in.

185

Thank you.

186

It has the display none there.

187

You could declare it.

188

I'm not going to but you know what let's put it display None, it's redundant, but just to be explicit about what's happening.

189

We're going from a display none with an opacity of zero and let's add a translate Translate down.

190

I always get these mixed up.

191

So X is first. So zero.

192

I'm going to do 30 pixels here.

193

The only other thing I need here is an opacity of one.

194

So we actually see it when it's opened.

195

So if I click on that, yeah, it's translated down a little bit.

196

And I'll fix this once we bring in this next step, which is to do...

197

we have...

198

I'm trying to think, there's two different properties and I always mix them up.

199

But we're going to do a transition. So transition.

200

We need to transition our display type.

201

We want to transition our overlay, which is...

202

I I'm going to put it anyway.

203

The overlay we saw that in and that was the thing

204

that had the important on it in the dev tools

205

and you need for popovers and for modals

206

when there it's anything that's using top layer

207

and that's the other thing with popovers is they use a top layer

208

so you don't have to worry about z index issues it's

209

always going to be on top until you start dealing with multiple popovers and multiple things on the top layer.

210

We're going to say display overlay and our the different things that we do.

211

So let's just say this is our transition property.

212

Right, so we're going to do all of those.

213

But then the reason I'm doing these separately is just so we can give them all the same timing.

214

So transition duration, instead of repeating it over and over again, let's just say this will be for demo purposes, we'll make it slow and then speed it up.

215

And the last thing that's really important is our transition behavior.

216

And this is going to be a allowed discrete.

217

I think this is the one that I mix up sometimes.

218

But display is something that allows for discrete animations.

219

And what a discrete animation is.

220

Discrete animation is something like a display type.

221

It doesn't have anything to interpolate in between the two states.

222

So it has to just jump at one point, which traditionally speaking, transitions just meant it wouldn't do it, right?

223

It would just instantly switch.

224

With an animation, it was a bit different.

225

It would happen at, I think, the 50 % point.

226

So a transition behavior allowed discrete, by doing it as the longhand for each of these, it means it's applying it to all of these,

227

which it doesn't really change anything for opacity or our translate, but it does, or it is required for our display and our overlay here.

228

So now you can see there, ha, it works not that way, but when I dismiss, It is working my translate.

229

We're also going to do that's weird.

230

Actually, I see it jumping in a weird way.

231

Oh, the display has doing something weird there too.

232

We'll figure that one out.

233

Display type.

234

The grid is going away.

235

in an unexpected way.

236

Hmm, that's an interesting one.

237

We'll figure that one out.

238

But we can see at least it's fading away.

239

So to get around this because of the way.

240

What's happening is it's instantly putting the display type on, but when you go from display none to display something, it's there all of a sudden.

241

So it's not coming in with the opacity of zero or this translate that we've put on there.

242

It's just coming in existing.

243

And so it doesn't realize any of the properties that were applied to it previously.

244

So to fix that, on our popover open, we come in with an at starting style.

245

And this has to come last.

246

Very, very important in the order here, which can feel a little bit weird, but we do our at starting style.

247

And our at starting style will be an opacity of zero and a translate of, and I'm going to use the same one we did here,

248

but this is where starting style can actually get kind of interesting because they don't have to be the same.

249

So now when I click on this, it's going to appear. And then when I...

250

click away, it will disappear.

251

Now there's a few weird things happening that we will figure out why the layout is changing.

252

We can see it's working in both directions.

253

The last thing I want here is a translate of zero pixels, zero pixels.

254

because when I click on it, I want it to sort of slide up a little bit.

255

And then when I click away, I want it to slide back down.

256

It's kind of weird, right?

257

This sort of makes sense.

258

We're coming from the button.

259

It's too slow, but it's coming up.

260

But then when I close it, I want this to be different.

261

I want to sort of fade away upward.

262

So that's why the starting style is cool.

263

We can do different opening and closing animations.

264

So it's going to slide up that way.

265

And then I click here, it's going to slide on up that way.

266

Now, why is the display?

267

not working as intended, and I discovered the problem.

268

Very silly of me, but I set the display grid here, which has to be here.

269

The problem is when it's it's opening, it has all of those things on it.

270

But when I close, This is only when it's open, and we're not transitioning our Gap or Grid Template columns.

271

So these actually need to be always there.

272

So the popover opened, We have a gap, we have a grid template columns, and that means when we're closing it, while the grid is still there on that transition outwards,

273

it's keeping those applied.

274

I mentioned we could include them up there.

275

So that's one of those like gotchas that can come along.

276

So there we go.

277

It works that way.

278

And it holds those styles as it fades off.

279

Little gotcha that can come up there, which might even be worthy of having a comment if you're playing around with this, right?

280

So if you're creating this, leaving a comment here could be useful for your future self or your coworkers.

281

And now I think we have that set up.

282

So let's just fix this transition duration because two seconds is really fast.

283

Maybe we're going to 0 .75 or something, which is probably still kind of slow.

284

But I think that's pretty good, especially because it can be interacted with right away.

285

Yeah, I'm pretty happy with that.

286

There we go.

287

And as I said, let's get rid of that.

288

Did you do the outline?

289

And with that gone, we have a nice little thing.

290

It pops up.

291

It switches axes.

292

If there's not enough room, it's not doing it on the bottom.

293

But if we ran out of room on the bottom, it would flip around the other way.

294

It opens and closes.

295

So I hope you enjoyed this video.

296

Learned a few things along the way.

297

And I want 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 continued support.

298

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

O que é a Técnica de Shadowing?

Shadowing é uma técnica de aprendizado de idiomas com base científica, originalmente desenvolvida para o treinamento de intérpretes profissionais. O método é simples, mas poderoso: você ouve áudio em inglês nativo e repete imediatamente em voz alta — como uma sombra seguindo o falante com 1-2 segundos de atraso. Pesquisas mostram melhora significativa na precisão da pronúncia, entonação, ritmo, sons conectados, compreensão auditiva e fluência na fala.

ShadowingEnglish.com – Prática de Shadowing em Inglês

Fale inglês fluentemente usando a técnica de Shadowing. Ouça vídeos nativos do YouTube, repita frase por frase e desenvolva pronúncia e fluência reais — usado por estudantes de IELTS no mundo todo.

Prática de Shadowing: Native popovers with smooth animations (no JS required) - Aprenda a falar inglês com o YouTube

Sobre Esta Aula

Vocabulário e Frases-Chave

Dicas de Prática

O que é a Técnica de Shadowing?

Prática de Shadowing: Native popovers with smooth animations (no JS required) - Aprenda a falar inglês com o YouTube

Baixar aplicativo

Sobre Esta Aula

Vocabulário e Frases-Chave

Dicas de Prática

O que é a Técnica de Shadowing?