Question

我试图在按钮点击上添加动画，所以我能够在按钮上显示动画，但我想在每个按钮上显示动画，为此我不能为n个按钮创建n个动画类。

目前我为一个按钮添加了一个div，我动画了。但是为单独的按钮添加单独的div很困难。

HTML代码： -

<a data-toggle="tab" href="#paper">
    <button type="button" class="btn btn-secondary btn-primary-custom" id="btn_Paper" onclick="buttonMediaPressed(this.id)">
    Paper
   </button>
</a>                               
<a data-toggle="tab" href="#news" >
  <button type="button" class="btn btn-secondary btn-primary-custom" id="btn_News" onclick="buttonMediaPressed(this.id)">
    News  
</button>
</a>   
<a data-toggle="tab" href="#web" >
   <button type="button" class="btn btn-secondary btn-primary-custom" id="btn_Website" onclick="buttonMediaPressed(this.id)">
       Website 
      <div class="circle"></div>                                    
   </button>
</a>

目前我只为网站按钮添加了动画类。但我需要将其添加到其他按钮中。我有近40-50个按钮，我无法创建相同数量的div。

CSS代码

.circle {  


position: absolute;
    width : 50px !important;    
    height : 35px !important;
    margin-top:-32px;
    margin-left:-12px;
    border:2px solid green !important;
    -webkit-transform: scale(4);
    -moz-transform: scale(0);
    transform: scale(0);
    -webkit-border-radius : 50%;
    -webkit-transition: all 0.4s ease-out;
    -moz-transition: all 0.4s ease-out;
    transition: all 0.4s ease-out;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%; 
    }

   .open.circle {
     opacity: 100;
     -webkit-transform: scale(1);
     -moz-transform: scale(1);
     transform: scale(1);

  }


.circle a {
  text-decoration: none;
  color: white;
  display: block;
  height: 40px;
  width: 40px;
  line-height: 40px;
  margin-left: -20px;
  margin-top: -20px;
  position: absolute;
  text-align: center; 

}

.circle a:hover {
  color: #eef;
}

JavaScript代码

function buttonMediaPressed(clicked_btn_id){

        console.log("In buttonMediaPressed function :- " +clicked_btn_id);

        else if(clicked_btn_id.localeCompare("btn_BT") == 0){       
            $('.circle').toggleClass('open');   
        setTimeout(function(){
            //change image back
            $('.circle').toggleClass('open');   
        }, 300);                
}

我正在制作动画，如下图所示。按钮点击后，循环将进入按钮区域。

请建议我如何做到这一点。或任何好的参考。

Answer 1

据我了解这个问题，问题是必须将这些div添加到按钮，对吗？

如果该功能已经绑定到这些按钮，您可以在点击时动态添加div。 https://jsfiddle.net/njcLzv9y/

这是代码

.circle {
  position: absolute;
  width: 50px !important;
  height: 35px !important;
  margin-top: -32px;
  margin-left: -12px;
  border: 2px solid green !important;
  -webkit-transform: scale(0);
  -moz-transform: scale(0);
  transform: scale(0);
  -webkit-border-radius: 50%;
  -webkit-transition: all 0.4s ease-out;
  -moz-transition: all 0.4s ease-out;
  transition: all 0.4s ease-out;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  border-radius: 50%;
  opacity: 0;
}
.open.circle {
  opacity: 100;
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  transform: scale(1);
}
.circle a {
  text-decoration: none;
  color: white;
  display: block;
  height: 40px;
  width: 40px;
  line-height: 40px;
  margin-left: -20px;
  margin-top: -20px;
  position: absolute;
  text-align: center;
}
.circle a:hover {
  color: #eef;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<a data-toggle="tab" href="#paper">
  <button type="button" class="btn btn-secondary btn-primary-custom" id="btn_Paper" onclick="buttonMediaPressed(this.id)">
    Paper
  </button>
</a>
<a data-toggle="tab" href="#news">
  <button type="button" class="btn btn-secondary btn-primary-custom" id="btn_News" onclick="buttonMediaPressed(this.id)">
    News
    <span></span>
  </button>
</a>
<a data-toggle="tab" href="#web">
  <button type="button" class="btn btn-secondary btn-primary-custom" id="btn_Website" onclick="buttonMediaPressed(this.id)">
    Website
    <div class="circle"></div>
  </button>
</a>

StringBuilder

按钮单击许多按钮的动画

1 个答案: