如何在点击时启动CSS动画？

时间：2019-05-22 06:04:04

标签： javascript css

我对前端开发人员还很陌生，所以请饶我...无论如何，对于this codepen project，我正在尝试制作动画，其中一叠煎饼落在盘子上，当您单击时可以激活按钮。在单击该按钮之前，它应该只是一块空盘子。

不确定为什么我的JS代码不起作用，但是如果我以煎饼或堆栈类为目标，则视觉效果仍然保持不变。

HTML：

 <div class="container">
  <div class="plate">
      <div class="inner-plate">
      </div>
  </div>

  <button onclick="onclick()">Good Morning!</button>

  <div class="stack">
    <div class="pancake">
      <div class="top-p"></div>
    </div>
    <div class="pancake p2">
      <div class="top-p"></div>
    </div>
    <div class="pancake p3">
      <div class="top-p"></div>
    </div>
    <div class="pancake p4">
      <div class="top-p"></div>
    </div>
    <div class="pancake p5">
      <div class="top-p"></div>
    </div>
    <div class="pancake p6">
      <div class="top-p"></div>
      <div class="butter">
        <div class = "shadow"></div>
        <div class = "top-b"></div>
        <div class = "shine"></div>
      </div>
    </div>
</div>

CSS（摘要）

/*------BUTTON------*/
button { 
  display: inline-block;
  border: none;
  margin-top: 25%; 
  padding: 1em 2em;
  /*CSS center element trick*/
  position: absolute;
/* Gradient */
  background: linear-gradient(90deg, #FF5F6D 0%, rgba(255, 195, 113, 0.88) 100%);
  box-shadow: 0px 4px 10px rgba(255, 95, 109, 0.25);
  border-radius: 40px;
  /*text*/
  position: relative;
  text-transform: uppercase;
  font-family: Montserrat, system-ui;
  font-style: normal;
  font-weight: 600;
  font-size: 14px;
  line-height: 15px; 
  letter-spacing: 0.14px;
  color: #fff;
  cursor: pointer;
  transition: all 0.1s linear;
}

  button:hover {
        transform: translateY(-6px); 
    background: linear-gradient(90deg, #FF777C 0%, #FFC487 100%);
    box-shadow: 0px 6px 5px rgba(255, 95, 109, 0.25);
}    

.plate { 
  position: relative; 
  width: 100%;
  height: 100%; 
  background: #FFFFFF;
  /* Stroke */
  border: 1.25px solid #F9EADC;
  border-radius: 50%; 
  box-shadow: 0px 4px 4px rgba(165, 75, 75, 0.15);
}

.inner-plate { 
  position: relative;
  width: 75%; 
  height: 30px;
  background: #FFFFFF;
  /* Stroke */
  border: 1.25px solid #F9EADC;
  border-radius: 50%; 
  margin: 5px auto; /*stacked "plates" without flexboxes*/ 
}

/*------ELEMENTS TO ANIMATE------*/

.pancake {
  display: inline-block;
  position: absolute;
  width: 65%;
  height: 25%;
  left: 18%;
  top: 0;
  background: #FFE68E;
  border-radius: 50%; 
  z-index: 1;
}

.top-p {
  position: absolute;
  width: 95%;
  height: 80%;
  left: 2.25%;
  background: linear-gradient(180deg, rgba(222, 159, 101, 0.75) 0%, #E09148 100%);
  border-radius: 50%; 
}

.slideIn {
  -webkit-animation: slideIn 1s linear both;
  animation: slideIn 1s linear both;
}

/*------ KEYFRAMES -----*/
@-webkit-keyframes slideIn {
  0% {
    -webkit-transform: translateY(-1000px);
            transform: translateY(-1000px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }
}

@-webkit-keyframes slideIn {
  0% {
    -webkit-transform: translateY(-1000px);
            transform: translateY(-1000px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }
}
@keyframes slideIn {
  0% {
    -webkit-transform: translateY(-1000px);
            transform: translateY(-1000px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }
}

JS：

$(function() {
  $('button').onclick(function() {
    $('.pancake').addClass('slideIn');
  });
})

4 个答案:

答案 0 :(得分：2)

有一堆不正确的东西，我已经将其修复并标记为FIX 

$(function() {
  $('button').click(function() {
    // FIX: you forgot the dot
    $('.pancake').addClass('slideIn');
  });
});
@import url('https://fonts.googleapis.com/css?family=Montserrat:600&display=swap');

* {
outline: none;
  /*NOTE: removing the blue outline for links and buttons is a terrible UI/UX decision for accessibility! Some folks do not have the motor skills to use a mouse and use the alternative Tab button instead. This is purely just for show and practice :-) */ 
}

body {
  position: relative;
  height: 100vh;
  padding: 0; 
  margin: 0;
  background: #FDF6D0;
	display: flex;
	align-items: center;
  text-align: center; 
}

.container{
	position: absolute;
  margin-top: auto;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%); 
  align-items: center; 
}

/*------BUTTON------*/
button { 
  display: inline-block;
  border: none;
  margin-top: 25%; 
  padding: 1em 2em;
  /*CSS center element trick*/
  position: absolute;
/* Gradient */
  background: linear-gradient(90deg, #FF5F6D 0%, rgba(255, 195, 113, 0.88) 100%);
  box-shadow: 0px 4px 10px rgba(255, 95, 109, 0.25);
  border-radius: 40px;
  /*text*/
  position: relative;
  text-transform: uppercase;
  font-family: Montserrat, system-ui;
  font-style: normal;
  font-weight: 600;
  font-size: 14px;
  line-height: 15px; 
  letter-spacing: 0.14px;
  color: #fff;
  cursor: pointer;
  transition: all 0.1s linear;
}

  button:hover {
		transform: translateY(-6px); 
    background: linear-gradient(90deg, #FF777C 0%, #FFC487 100%);
    box-shadow: 0px 6px 5px rgba(255, 95, 109, 0.25);
}    

.plate { 
  position: relative; 
  width: 100%;
  height: 100%; 
  background: #FFFFFF;
  /* Stroke */
  border: 1.25px solid #F9EADC;
  border-radius: 50%; 
  box-shadow: 0px 4px 4px rgba(165, 75, 75, 0.15);
}

.inner-plate { 
  position: relative;
  width: 75%; 
  height: 30px;
  background: #FFFFFF;
  /* Stroke */
  border: 1.25px solid #F9EADC;
  border-radius: 50%; 
  margin: 5px auto; /*stacked "plates" without flexboxes*/ 
}

/*------ELEMENTS TO ANIMATE------*/

.pancake {
  display: inline-block;
  position: absolute;
  width: 65%;
  height: 25%;
  left: 18%;
  top: 0;
  background: #FFE68E;
  border-radius: 50%; 
  z-index: 1;
  /*pancakes falling*/
  -webkit-animation: slideIn 1s linear both;
  animation: slideIn 1s linear both;
  
  /* FIX: Pause the animation on start */
  animation-play-state: paused;
}

/* FIX: Resume the animation when this class is added */
.slideIn {
  animation-play-state: running;
}

.top-p {
  position: absolute;
  width: 95%;
  height: 80%;
  left: 2.25%;
  background: linear-gradient(180deg, rgba(222, 159, 101, 0.75) 0%, #E09148 100%);
  border-radius: 50%; 
}

.p2 {
  z-index: 2;
  top: -7%; 
  left: 18%; 
}

.p3 {
  z-index: 3;
  top: -14%; 
  left: 18%; 
}

.p4 {
  z-index: 4;
  top: -21%; 
  left: 18%; 
}

.p5 {
  z-index: 5;
  top: -28%; 
  left: 18%; 
}

.p6 {
  z-index: 6;
  top: -35%; 
  left: 18%; 
}

/*BUTTER*/
.shadow {
  position: absolute;
  z-index: 8;
  top: -7%;
  left: 42%; 
  height: 30%; 
  width: 15%;
  margin: auto;
  background: #FFDE68;
  border-radius: 1px;
  box-shadow: 1px 2px 2px rgba(202, 133, 65, 0.75);
  transform: matrix(0.74, -0.44, 0.98, 0.77, 0, 0); 
  }

.top-b {
  position: absolute;
  z-index: 9;
  top: -10%;
  left: 45%; 
  height: 25%; 
  width: 10%;
  margin: auto;
  background: #FFEFB5;
  border-radius: 1px;
  transform: matrix(0.74, -0.44, 0.98, 0.77, 0, 0); 
}

.shine{
  position: absolute;
  z-index: 10;
  top: -4%;
  left: 49%; 
  height: 7%; 
  width: 4%;
  margin: auto;
  background: #FFF;
  border-radius: 1px;
  transform: rotate(45deg);
}

.slideIn {
  -webkit-animation: slideIn 1s linear both;
  animation: slideIn 1s linear both;
}

/*------ KEYFRAMES -----*/
@-webkit-keyframes slideIn {
  0% {
    -webkit-transform: translateY(-1000px);
            transform: translateY(-1000px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }
}

@-webkit-keyframes slideIn {
  0% {
    -webkit-transform: translateY(-1000px);
            transform: translateY(-1000px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }
}
@keyframes slideIn {
  0% {
    -webkit-transform: translateY(-1000px);
            transform: translateY(-1000px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }
}
<!-- FIX: You forgot to import the jquery in CodePen! -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<div class="container">
  <div class="plate">
      <div class="inner-plate">
      </div>
  </div>
  
  <!-- FIX: You don't need to bind function here since you've already done it in js.-->
  <button>Good Morning!</button>
  <div class="stack">
    <div class="pancake">
      <div class="top-p"></div>
    </div>
    <div class="pancake p2">
      <div class="top-p"></div>
    </div>
    <div class="pancake p3">
      <div class="top-p"></div>
    </div>
    <div class="pancake p4">
      <div class="top-p"></div>
    </div>
    <div class="pancake p5">
      <div class="top-p"></div>
    </div>
    <div class="pancake p6">
      <div class="top-p"></div>
      <div class="butter">
        <div class = "shadow"></div>
        <div class = "top-b"></div>
        <div class = "shine"></div>
      </div>
    </div>
</div>

答案 1 :(得分：1)

类标识符错误，应该为$(".pancake") 

$(function() {
  $('button').onclick(function() {
    $('.pancake').addClass('slideIn');
  });
})
javascript

答案 2 :(得分：0)

您需要在.中添加类标识符$(".pancake") 

$(function() {
  $('button').click(function() {
    $('.pancake').addClass('slideIn');
  });
})
@import url('https://fonts.googleapis.com/css?family=Montserrat:600&display=swap');

* {
outline: none;
  /*NOTE: removing the blue outline for links and buttons is a terrible UI/UX decision for accessibility! Some folks do not have the motor skills to use a mouse and use the alternative Tab button instead. This is purely just for show and practice :-) */ 
}

body {
  position: relative;
  height: 100vh;
  padding: 0; 
  margin: 0;
  background: #FDF6D0;
	display: flex;
	align-items: center;
  text-align: center; 
}

.container{
	position: absolute;
  margin-top: auto;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%); 
  align-items: center; 
}

/*------BUTTON------*/
button { 
  display: inline-block;
  border: none;
  margin-top: 25%; 
  padding: 1em 2em;
  /*CSS center element trick*/
  position: absolute;
/* Gradient */
  background: linear-gradient(90deg, #FF5F6D 0%, rgba(255, 195, 113, 0.88) 100%);
  box-shadow: 0px 4px 10px rgba(255, 95, 109, 0.25);
  border-radius: 40px;
  /*text*/
  position: relative;
  text-transform: uppercase;
  font-family: Montserrat, system-ui;
  font-style: normal;
  font-weight: 600;
  font-size: 14px;
  line-height: 15px; 
  letter-spacing: 0.14px;
  color: #fff;
  cursor: pointer;
  transition: all 0.1s linear;
}

  button:hover {
		transform: translateY(-6px); 
    background: linear-gradient(90deg, #FF777C 0%, #FFC487 100%);
    box-shadow: 0px 6px 5px rgba(255, 95, 109, 0.25);
}    

.plate { 
  position: relative; 
  width: 100%;
  height: 100%; 
  background: #FFFFFF;
  /* Stroke */
  border: 1.25px solid #F9EADC;
  border-radius: 50%; 
  box-shadow: 0px 4px 4px rgba(165, 75, 75, 0.15);
}

.inner-plate { 
  position: relative;
  width: 75%; 
  height: 30px;
  background: #FFFFFF;
  /* Stroke */
  border: 1.25px solid #F9EADC;
  border-radius: 50%; 
  margin: 5px auto; /*stacked "plates" without flexboxes*/ 
}

/*------ELEMENTS TO ANIMATE------*/

.pancake {
  display: inline-block;
  position: absolute;
  width: 65%;
  height: 25%;
  left: 18%;
  top: 0;
  background: #FFE68E;
  border-radius: 50%; 
  z-index: 1;
  /*pancakes falling*/
  -webkit-animation: slideIn 1s linear both;
  animation: slideIn 1s linear both;
}

.top-p {
  position: absolute;
  width: 95%;
  height: 80%;
  left: 2.25%;
  background: linear-gradient(180deg, rgba(222, 159, 101, 0.75) 0%, #E09148 100%);
  border-radius: 50%; 
}

.p2 {
  z-index: 2;
  top: -7%; 
  left: 18%; 
}

.p3 {
  z-index: 3;
  top: -14%; 
  left: 18%; 
}

.p4 {
  z-index: 4;
  top: -21%; 
  left: 18%; 
}

.p5 {
  z-index: 5;
  top: -28%; 
  left: 18%; 
}

.p6 {
  z-index: 6;
  top: -35%; 
  left: 18%; 
}

/*BUTTER*/
.shadow {
  position: absolute;
  z-index: 8;
  top: -7%;
  left: 42%; 
  height: 30%; 
  width: 15%;
  margin: auto;
  background: #FFDE68;
  border-radius: 1px;
  box-shadow: 1px 2px 2px rgba(202, 133, 65, 0.75);
  transform: matrix(0.74, -0.44, 0.98, 0.77, 0, 0); 
  }

.top-b {
  position: absolute;
  z-index: 9;
  top: -10%;
  left: 45%; 
  height: 25%; 
  width: 10%;
  margin: auto;
  background: #FFEFB5;
  border-radius: 1px;
  transform: matrix(0.74, -0.44, 0.98, 0.77, 0, 0); 
}

.shine{
  position: absolute;
  z-index: 10;
  top: -4%;
  left: 49%; 
  height: 7%; 
  width: 4%;
  margin: auto;
  background: #FFF;
  border-radius: 1px;
  transform: rotate(45deg);
}

.slideIn {
  -webkit-animation: slideIn 1s linear both;
  animation: slideIn 1s linear both;
}

/*------ KEYFRAMES -----*/
@-webkit-keyframes slideIn {
  0% {
    -webkit-transform: translateY(-1000px);
            transform: translateY(-1000px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }
}

@-webkit-keyframes slideIn {
  0% {
    -webkit-transform: translateY(-1000px);
            transform: translateY(-1000px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }
}
@keyframes slideIn {
  0% {
    -webkit-transform: translateY(-1000px);
            transform: translateY(-1000px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <div class="plate">
      <div class="inner-plate">
      </div>
  </div>

  <button>Good Morning!</button>

  <div class="stack">
    <div class="pancake">
      <div class="top-p"></div>
    </div>
    <div class="pancake p2">
      <div class="top-p"></div>
    </div>
    <div class="pancake p3">
      <div class="top-p"></div>
    </div>
    <div class="pancake p4">
      <div class="top-p"></div>
    </div>
    <div class="pancake p5">
      <div class="top-p"></div>
    </div>
    <div class="pancake p6">
      <div class="top-p"></div>
      <div class="butter">
        <div class = "shadow"></div>
        <div class = "top-b"></div>
        <div class = "shine"></div>
      </div>
    </div>
</div>

答案 3 :(得分：0)

使用以下js（我从css throw类中删除动画并向其中添加.pancake）

transform: translateY(-1000px);

function onClick() {
  [...document.querySelectorAll('.pancake')]
    .map(x=> x.classList.add('slideIn'));
}

function onClick() {
  [...document.querySelectorAll('.pancake')].map(x=> x.classList.add('slideIn'));
}
@import url('https://fonts.googleapis.com/css?family=Montserrat:600&display=swap');

* {
outline: none;
  /*NOTE: removing the blue outline for links and buttons is a terrible UI/UX decision for accessibility! Some folks do not have the motor skills to use a mouse and use the alternative Tab button instead. This is purely just for show and practice :-) */ 
}

body {
  position: relative;
  height: 100vh;
  padding: 0; 
  margin: 0;
  background: #FDF6D0;
	display: flex;
	align-items: center;
  text-align: center; 
}

.container{
	position: absolute;
  margin-top: auto;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%); 
  align-items: center; 
}

/*------BUTTON------*/
button { 
  display: inline-block;
  border: none;
  margin-top: 25%; 
  padding: 1em 2em;
  /*CSS center element trick*/
  position: absolute;
/* Gradient */
  background: linear-gradient(90deg, #FF5F6D 0%, rgba(255, 195, 113, 0.88) 100%);
  box-shadow: 0px 4px 10px rgba(255, 95, 109, 0.25);
  border-radius: 40px;
  /*text*/
  position: relative;
  text-transform: uppercase;
  font-family: Montserrat, system-ui;
  font-style: normal;
  font-weight: 600;
  font-size: 14px;
  line-height: 15px; 
  letter-spacing: 0.14px;
  color: #fff;
  cursor: pointer;
  transition: all 0.1s linear;
}

  button:hover {
		transform: translateY(-6px); 
    background: linear-gradient(90deg, #FF777C 0%, #FFC487 100%);
    box-shadow: 0px 6px 5px rgba(255, 95, 109, 0.25);
}    

.plate { 
  position: relative; 
  width: 100%;
  height: 100%; 
  background: #FFFFFF;
  /* Stroke */
  border: 1.25px solid #F9EADC;
  border-radius: 50%; 
  box-shadow: 0px 4px 4px rgba(165, 75, 75, 0.15);
}

.inner-plate { 
  position: relative;
  width: 75%; 
  height: 30px;
  background: #FFFFFF;
  /* Stroke */
  border: 1.25px solid #F9EADC;
  border-radius: 50%; 
  margin: 5px auto; /*stacked "plates" without flexboxes*/ 
}

/*------ELEMENTS TO ANIMATE------*/

.pancake {
  display: inline-block;
  position: absolute;
  width: 65%;
  height: 25%;
  left: 18%;
  top: 0;
  background: #FFE68E;
  border-radius: 50%; 
  z-index: 1;
  /*pancakes falling*/
  transform: translateY(-1000px);
}

.top-p {
  position: absolute;
  width: 95%;
  height: 80%;
  left: 2.25%;
  background: linear-gradient(180deg, rgba(222, 159, 101, 0.75) 0%, #E09148 100%);
  border-radius: 50%; 
}

.p2 {
  z-index: 2;
  top: -7%; 
  left: 18%; 
}

.p3 {
  z-index: 3;
  top: -14%; 
  left: 18%; 
}

.p4 {
  z-index: 4;
  top: -21%; 
  left: 18%; 
}

.p5 {
  z-index: 5;
  top: -28%; 
  left: 18%; 
}

.p6 {
  z-index: 6;
  top: -35%; 
  left: 18%; 
}

/*BUTTER*/
.shadow {
  position: absolute;
  z-index: 8;
  top: -7%;
  left: 42%; 
  height: 30%; 
  width: 15%;
  margin: auto;
  background: #FFDE68;
  border-radius: 1px;
  box-shadow: 1px 2px 2px rgba(202, 133, 65, 0.75);
  transform: matrix(0.74, -0.44, 0.98, 0.77, 0, 0); 
  }

.top-b {
  position: absolute;
  z-index: 9;
  top: -10%;
  left: 45%; 
  height: 25%; 
  width: 10%;
  margin: auto;
  background: #FFEFB5;
  border-radius: 1px;
  transform: matrix(0.74, -0.44, 0.98, 0.77, 0, 0); 
}

.shine{
  position: absolute;
  z-index: 10;
  top: -4%;
  left: 49%; 
  height: 7%; 
  width: 4%;
  margin: auto;
  background: #FFF;
  border-radius: 1px;
  transform: rotate(45deg);
}

.slideIn {
  -webkit-animation: slideIn 1s linear both;
  animation: slideIn 1s linear both;
}

/*------ KEYFRAMES -----*/
@-webkit-keyframes slideIn {
  0% {
    -webkit-transform: translateY(-1000px);
            transform: translateY(-1000px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }
}

@-webkit-keyframes slideIn {
  0% {
    -webkit-transform: translateY(-1000px);
            transform: translateY(-1000px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }
}
@keyframes slideIn {
  0% {
    -webkit-transform: translateY(-1000px);
            transform: translateY(-1000px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }
}

相关问题
最新问题