单击时防止材质按钮动画 [英] Prevent material button animation on click

问题描述

我制作了一个带有按钮的页面，如下所示:

<button mat-button class="edit-library-button"><img class="edit-library-img" src="..."/><img class="library-picture" src="..."></img>

按钮采用棱角分明的材质设计.

当我点击父按钮时，我想导航到某个页面，当我点击子按钮时，我想显示一些额外的内容.这是有效的.

当我单击父按钮时，会触发按钮的默认角度材质动画.这对我来说没问题.我的问题是，当我点击子按钮时，就好像父按钮也被点击了一样，因此两个按钮都会触发默认的角度材质动画.我想防止这种情况发生.我想要的是当我点击它时只为子按钮触发动画.

任何线索我怎么能做到这一点?提前致谢.

解决方案

正如 WorksLikeACharm 发布的那样，不要嵌套按钮.如果您的问题只是定位问题，请将它们包装成 div 并在其中之一上使用 absolute 位置.

像这样:

div {position:relative;}按钮{背景颜色:透明；边界:0;}.edit-library-button {位置:绝对；顶部:40px；左:40px；}.edit-library-button img {width:30px;}

<button mat-button class="library-tile-button"><img class="library-picture" src="https://lh3.googleusercontent.com/proxy/7TiJY6Mswv0hNIXdXRS0fgT687TBQ2SaZFd7PNpO8qfknkj4oIjggatPNPhG_6h9DJedmAycJaWe3p2dGVHbTh2dOmgAycJaWe3p2dGVHb9FullAycJaWe3p2dGVHb9FycJaWe3p2dGVHbTh2FgT687TBQ1<button mat-button class="edit-library-button"><img class="edit-library-img" src="https://img.icons8.com/material/4ac144/256/facebook.png"/>

I have made a page with a button in a button like the following :

<button mat-button class="library-tile-button">

    <button mat-button class="edit-library-button">
        <img class="edit-library-img" src="..."/>
    </button>

    <img class="library-picture" src="..."></img>

</button>

The buttons use angular material design.

When I click on the parent button I want to navigate to a certain page and when I click on the child button I want to display some additional content. This is working.

When I click on the parent button the default angular material animation for button is triggered. That's fine with me. My problem is that when I click on the child button this is as if the parent button has also been clicked and so the default angular material animation is triggered for both button. I would like to prevent that. What I want is for the animation to be trigerred only for the child button when I click on it.

Any lead how I can acheive that ? Thanks in advance.

解决方案

As WorksLikeACharm posted, do not nest the buttoms. If your problem is just positioning, wrap them into a div and use absolute position on one of them.

Like this:

div {position:relative;}
button {background-color:transparent; border:0;}
.edit-library-button {
  position:absolute;
  top:40px;
  left:40px;
}
.edit-library-button img {width:30px;}

<div>
  <button mat-button class="library-tile-button"> 

      <img class="library-picture" src="https://lh3.googleusercontent.com/proxy/7TiJY6Mswv0hNIXdXRS0fgT687TBQ2SaZFd7PNpO8qfknkj4oIjggatPNPhG_6h9DJedmAycJaWe3p2dVHbFhOgyA0P0JbNu_aS1Tynre891APND36cFHll9qyIQWZ2vEk9kmg" />

  </button>
  <button mat-button class="edit-library-button">
          <img class="edit-library-img" src="https://img.icons8.com/material/4ac144/256/facebook.png"/>
   </button>
 </div>

这篇关于单击时防止材质按钮动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！