css - 在 Stenciljs 中单击时更改 CSS 类
问题描述
是否可以在 Stencil.js 中使用 W3School 中的简单菜单动画?
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_menu_icon_js
我正在尝试在单击事件上设置样式,但无法使其正常工作。该事件正在触发,但我无法设置课程。
在我的 .tsx 中:
import { Component, Prop, h } from '@stencil/core';
@Component({
tag: 'topbar-component',
styleUrl: 'topbar-component.css',
shadow: true
})
export class Topbar {
private menuToggle(e) {
return (
e.classList.toggle("change");
);
}
render() {
return (
<div class="topbar-menu">
<div class="container" onClick={(e) => this.menuToggle(e)}>
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
</div>
)
}
}
在我的 CSS 中:
.bar1, .bar2, .bar3 {
width: 35px;
height: 5px;
background-color: #333;
margin: 6px 0;
transition: 0.4s;
}
.change .bar1 {
-webkit-transform: rotate(-45deg) translate(-9px, 6px);
transform: rotate(-45deg) translate(-9px, 6px);
}
.change .bar2 {opacity: 0;}
.change .bar3 {
-webkit-transform: rotate(45deg) translate(-8px, -8px);
transform: rotate(45deg) translate(-8px, -8px);
}
我收到错误:未捕获的类型错误:无法读取未定义的属性“切换”
解决方案
您可以使用 state 属性来做到这一点:
import { Component, Prop, State, h } from '@stencil/core';
@Component({
tag: 'topbar-component',
styleUrl: 'topbar-component.css',
shadow: true
})
export class Topbar {
@State() isMenuOpen: boolean = false;
private menuToggle() {
this.isMenuOpen = !this.isMenuOpen;
}
render() {
return (
<div class="topbar-menu">
<div class={{ container: true, change: this.isMenuOpen }}" onClick={(e) => this.menuToggle(e)}>
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
</div>
)
}
}
推荐阅读
- linux - cronjob 在错误的日期执行
- entity-framework-core - 如何在 DDD 模式和 EF Core 中使用悲观并发?
- html - HTML表格:合并行单元格
- python - Django模型组织问题
- unity3d - 为什么我的角色最终会通过 MoveTowards() 减慢并停止移动?
- r - 如何使这个刻面图中的尺度连续?
- python - 开始日期大于日历周期的结束日期
- javascript - 如何从 url 获取数据并解析它以获取爱好或名称?
- javascript - JavaScript 检测给定的地区和日期是否是假期
- mongodb - mongo golang驱动程序无条件删除所有数组项