更改菜单流星中的图标

我使用流星平台，我是新手。现在我尝试为菜单图标设置动画，但没有任何更改。更改菜单流星中的图标

HTML：

<template name="header"> 
<div class="container"> 
    <div class="btn-menu"> 
    <span class="bar1"></span> 
    <span class="bar2"></span> 
    <span class="bar3"></span> 
    <span>menu</span> 
    </div> 
</div> 
</template>

CSS：

.btn-menu { 
    float: right; 
    width: 31px; 
    height:32px; 
    position: relative; 
    transform : rotate(0deg); 
    transition-duration: 0.5s; 
    transition-timimg-function: ease-in-out; 
    cursor: pointer; 
    margin: 6px 7px 0 40px; 
} 

.btn-menu span { 
    display: block; 
    position: absolute; 
    height: 4px; 
    width: 100%; 
    background-color: rgb(88, 89, 91); 
    left: 0; 
    transform : rotate(0deg); 
    transition-duration: 0.25s; 
    transition-timimg-function: ease-in-out; 
} 

.btn-menu span:nth-child(1){ 
    top: 0; 
    tansform-origin: left center; 
} 

.btn-menu span:nth-child(2){ 
    top: 9px; 
    tansform-origin: left center; 
} 

.btn-menu span:nth-child(3){ 
    top: 18px; 
    tansform-origin: left center; 
} 

.btn-menu span:nth-child(4){ 
    top: 26px; 
    text-transform: uppercase; 
    background-color: rgb(255, 255, 255); 
    font-weight: bold; 
    font-size: 11px; 
    tansform-origin: left center; 
} 

.change .bar1{ 
    transform: rotate(-45deg) translate(-9px, 6px); 
} 

.change .bar2{ 
    opacity:0; 
} 

.change .bar3{ 
    transform: rotate(45deg) translate(-8px, -px) ; 
}

当它被点击，它会执行JavaScript代码，增加了一个新的类名给它，这将改变风格各水平条：第一个和最后一个条被转换并旋转为字母“x”。中间的酒吧淡出，变得不可见。

的JavaScript：

Template.header.event({ 
'click .btn-menu'(event) { 
    const x = event.target; 
    x.classList.toggle("change"); 
    }, 
});

谁能帮我找到了什么问题？

来源

2017-07-07 eslam

这不是模板工作的方式。这不是100％触发重新渲染。 'click .btn-manu'应该更新一个被模板帮助器返回的被动变量。反应变量的变化肯定会导致您的模板重新呈现：https：//blog.meteor.com/the-meteor-chef-reactive-dict-reactive-vars-and-session-variables-971584515a27 – Jankapunkt

确保您了解event.target和event.currentTarget之间的区别。

event.target给出分派的事件，即你的情况特殊“栏中的”用户已经点击了原来的DOM元素。鉴于你的CSS，这不是你所期望的。
event.currentTarget给出事件侦听器附加到的DOM元素，它在捕获或冒泡阶段接收事件。在你的情况下，<div>与类"btn-menu"。鉴于你的CSS，这是你所期望的。

Template.header.event({ 
    'click .btn-menu' (event) { 
    const x = event.currentTarget; // Use currentTarget instead of target. 
    x.classList.toggle("change"); 
    }, 
});

演示：https://jsfiddle.net/s1xyurq6/

注意：您还可以简单地使用图书馆像Hamburgers，或至少采取灵感来自于它。

来源

2017-07-08 19:12:18 ghybs

更改菜单流星中的图标

回答

相关问题