按下按钮不起作用时启动动画

时间：2017-06-07 15:59:27

标签： javascript jquery html css

我有一个名为divanimated的动画片。它是一个进入的rectangel。现在我想在按下按钮时在这个div上开始第二个动画。我不知道为什么它不起作用。 这是我的代码：

    <div class="div"> </div>
    <img src="/arrowright.png" class="arrowright">
    <script> 
        $(".arrowright").click(function(){
            $(".div").toggleClass("divanimated");
        });
    </script>

的CSS：

.divanimated{
animation-name: divanimated;
-webkit-animation-name: divanimated;    

animation-duration: 1.5s;   
-webkit-animation-duration: 1.5s;

animation-timing-function: ease-out;    
-webkit-animation-timing-function: ease-out;    

transform-origin: 0% 0%;
-ms-transform-origin: 0% 0%;
-webkit-transform-origin: 0% 0%;    

 background: #e74c3c;
z-index: 1;
width: 72.8vw;
height: 39vh;
margin-top: 136.5vh;   
margin-left: 13.6vw;
position: absolute;
border-radius: 7vh;
display: none;
box-shadow:2px 2px 10px #333333;
}

@keyframes divanimated{
0% {
    transform: scaleX(0.3);
}
40% {
    transform: scaleX(1.02);
}
60% {
    transform: scaleX(0.98);
}
80% {
    transform: scaleX(1.01);
}
100% {
    transform: scaleX(0.98);
}               
80% {
    transform: scaleX(1.01);
}
100% {
    transform: scaleX(1);
}                           
}

@-webkit-keyframes divanimated{
0% {
    -webkit-transform: scaleX(0.3);
}
40% {
    -webkit-transform: scaleX(1.02);
}
60% {
    -webkit-transform: scaleX(0.98);
}
80% {
    -webkit-transform: scaleX(1.01);
}
100% {
    -webkit-transform: scaleX(0.98);
}               
80% {
    -webkit-transform: scaleX(1.01);
}
100% {
    -webkit-transform: scaleX(1);
}       
}
.div{
animation-name: div;
-webkit-animation-name: div;    

animation-duration: 1.6s;   
-webkit-animation-duration: 1.6s;

animation-timing-function: ease-out;    
-webkit-animation-timing-function: ease -out;

visibility: visible !important; 

background: #e74c3c;
z-index: 1;
width: 72.8vw;
height: 39vh;
margin-top: 136.5vh;   
margin-left: 13.6vw;
position: absolute;
border-radius: 7vh;
display: none;
box-shadow:2px 2px 10px #333333;
}

@keyframes div{
0% {
    transform: translateY(100%) scaleX(0.5);
}
30%{
    transform: translateY(-8%) scaleX(0.5);
}   
40%{
    transform: translateY(2%) scaleX(0.5);
}
50%{
    transform: translateY(0%) scaleX(1.1);
}
60%{
    transform: translateY(0%) scaleX(0.9);      
}
70% {
    transform: translateY(0%) scaleX(1.05);
}           
80%{
    transform: translateY(0%) scaleX(0.95);     
}
90% {
    transform: translateY(0%) scaleX(1.02);
}   
100%{
    transform: translateY(0%) scaleX(1);        
}
}

@-webkit-keyframes div{
0% {
    -webkit-transform: translateY(100%) scaleX(0.5);
}
30%{
    -webkit-transform: translateY(-8%) scaleX(0.5);
}   
40%{
    -webkit-transform: translateY(2%) scaleX(0.5);
}
50%{
    -webkit-transform: translateY(0%) scaleX(1.1);
}
60%{
    -webkit-transform: translateY(0%) scaleX(0.9);      
}
70% {
    -webkit-transform: translateY(0%) scaleX(1.05);
}           
80%{
    -webkit-transform: translateY(0%) scaleX(0.95);     
}
90% {
    -webkit-transform: translateY(0%) scaleX(1.02);
}   
100%{
    -webkit-transform: translateY(0%) scaleX(1);        
}
}

有人能帮助我吗？我的代码怎么了？

感谢您的帮助。

3 个答案:

答案 0 :(得分：0)

您的.div和.divanimated选择器具有相同的特异性。由于在.div选择器后指定了<{1}}样式，因此它将覆盖所有类似的属性，例如.divanimated。

对于此示例，您可以通过将animation-name类添加到div选择器来解决问题。

您的新CSS选择器（CSS的第1行）将是： .divanimated

答案 1 :(得分：0)

这是答案......

＆＃13;
＆＃13; 
// Created a JS function which we'll call when arrow is clicked
function myFunction() {
  document.getElementById("div").className = "divanimated";
}
＆＃13; 
.arrowright{
  height: 50px;
  width: 50px;
  margin-top: 50vh;
  margin-left:90vw;
}

.divanimated{
  animation-name: divanimated;
  -webkit-animation-name: divanimated;    
  animation-duration: 1.5s;   
  -webkit-animation-duration: 1.5s;
  animation-timing-function: ease-out;    
  -webkit-animation-timing-function: ease-out;    
  transform-origin: 0% 0%;
  -ms-transform-origin: 0% 0%;
  -webkit-transform-origin: 0% 0%;    
  background: #e74c3c;
  z-index: 1;
  width: 72.8vw;
  height: 39vh;
  margin-top: 136.5vh;   
  margin-left: 13.6vw;
  position: absolute;
  border-radius: 7vh;
  box-shadow:2px 2px 10px #333333;
}

@keyframes divanimated{
  0% {
    transform: scaleX(0.3);
  }
  40% {
    transform: scaleX(1.02);
  }
  60% {
    transform: scaleX(0.98);
  }
  80% {
    transform: scaleX(1.01);
  }
  100% {
    transform: scaleX(0.98);
  }               
  80% {
    transform: scaleX(1.01);
  }
  100% {
    transform: scaleX(1);
  }                           
}

@-webkit-keyframes divanimated{
  0% {
    -webkit-transform: scaleX(0.3);
  }
  40% {
    -webkit-transform: scaleX(1.02);
  }
  60% {
    -webkit-transform: scaleX(0.98);
  }
  80% {
    -webkit-transform: scaleX(1.01);
  }
  100% {
    -webkit-transform: scaleX(0.98);
  }               
  80% {
    -webkit-transform: scaleX(1.01);
  }
  100% {
    -webkit-transform: scaleX(1);
  }       
}

/* Moved this into a div ID as before it was moving the div down */
#div {
  visibility: visible !important; 
  background: #e74c3c;
  z-index: 1;
  width: 72.8vw;
  height: 39vh;
  margin-top: 40.5vh;   
  margin-left: 13.6vw;
  position: absolute;
  border-radius: 7vh;
  box-shadow:2px 2px 10px #333333;
}

.div{
  animation-name: div;
  -webkit-animation-name: div;    
  animation-duration: 1.6s;   
  -webkit-animation-duration: 1.6s;
  animation-timing-function: ease-out;    
  -webkit-animation-timing-function: ease -out;
}

@keyframes div{
  0% {
    transform: translateY(100%) scaleX(0.5);
  }
  30%{
    transform: translateY(-8%) scaleX(0.5);
  }   
  40%{
    transform: translateY(2%) scaleX(0.5);
  }
  50%{
    transform: translateY(0%) scaleX(1.1);
  }
  60%{
    transform: translateY(0%) scaleX(0.9);      
  }
  70% {
    transform: translateY(0%) scaleX(1.05);
  }           
  80%{
    transform: translateY(0%) scaleX(0.95);     
  }
  90% {
    transform: translateY(0%) scaleX(1.02);
  }   
  100%{
    transform: translateY(0%) scaleX(1);        
  }
}

@-webkit-keyframes div{
  0% {
    -webkit-transform: translateY(100%) scaleX(0.5);
  }
  30%{
    -webkit-transform: translateY(-8%) scaleX(0.5);
  }   
  40%{
    -webkit-transform: translateY(2%) scaleX(0.5);
  }
  50%{
    -webkit-transform: translateY(0%) scaleX(1.1);
  }
  60%{
    -webkit-transform: translateY(0%) scaleX(0.9);      
  }
  70% {
    -webkit-transform: translateY(0%) scaleX(1.05);
  }           
  80%{
    -webkit-transform: translateY(0%) scaleX(0.95);     
  }
  90% {
    -webkit-transform: translateY(0%) scaleX(1.02);
  }   
  100%{
    -webkit-transform: translateY(0%) scaleX(1);        
  }
}
＆＃13; 
<!-- Added ID div and wrapped image with a div that listens for a click -->
<div id="div" class="div"> </div>
<div onclick="myFunction()">
  <img src="http://bbcpersian7.com/images/arrow-18.jpg" class="arrowright">
</div>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：0)

感谢所有帮助我:) 我明白了，我真的很高兴。谢谢大家。

相关问题
最新问题