时间戳

首页 > 解决方案 > （Angular 6）动态地将样式添加到单击的元素中。旋转人字形

css - （Angular 6）动态地将样式添加到单击的元素中。旋转人字形

问题描述

单击按钮时，我想旋转 V 形。所以我的问题是 - 怎么做？我应该添加整个 Angular 动画组件并在那里执行还是可以仅将旋转添加到雪佛龙？

<a href="#" (click)="transformArrow()">Show
   <span>
       <label class="m-0">this</label>
       <span class="glyphicons glyphicons-chevron-down" id="myElement"></span>
   </span>
</a>

然后我尝试添加一些功能

transformArrow(){
    let ele = document.getElementById('myElement');
    ele.style.transform  //And I stuck here as I need to actually access ":before" of this element and rotate it.
}

非常感谢 trichetriche 和 malbarmawi 的替代方案，我唯一需要改变的是“之后”到“之前”:)

我的想法是：

transformArrow(e) {
    let ele = document.getElementById('myElement');

        ele.classList.toggle('btn-change');


}


.glyphicons-chevron-down
    {
        transition: $trans-1;

        &.btn-change
        {
            &:before
            {
                position: relative;
                display: block;
                transform: rotate(180deg);
            }

        }
    }

我真的很喜欢 ngClass 的想法，但我喜欢将大部分操作保留在 component.ts 中，所以我想保留功能。是不是更好，或者像马尔巴马维那样做更好的做法？

标签： cssangularangular6

解决方案

为什么不通过 CSS 和自定义属性来实现呢？

ele.setAttribute('data-rotate', 'true')

span#myElement[data-rotate="true"]:after {
  transform: rotate(90deg);
}

推荐阅读