使用Javascript控制的CSS关键帧

时间：2017-11-30 18:03:53

标签： javascript jquery html css

我想使用JS / Jquery而不是CSS悬停操作来控制以下动画。有可能吗？

.button {
  width: 350px;
  height: 300px;
  margin: 100px auto;
  position: relative;
  border: solid 2px #cbd4d9;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}




.button:hover .hoverBtn:before, .button:hover .hoverBtn:after {
  opacity: 1;
  -webkit-animation: open 0.8s;
  /* Chrome, Safari, Opera */
  animation: open 0.8s;
  animation-fill-mode: forwards;
  animation-timing-function: cubic-bezier(0.39, 0.575, 0.565, 1);
  animation-direction: normal;
}
.button:hover .hoverBtn-bottom:before, .button:hover .hoverBtn-bottom:after {
  opacity: 1;
  -webkit-animation: openB 0.8s;
  /* Chrome, Safari, Opera */
  animation: openB 0.8s;
  animation-delay: 0.8s;
  animation-fill-mode: forwards;
  animation-timing-function: cubic-bezier(0.39, 0.575, 0.565, 1);
  animation-direction: normal;
}

.hoverBtn {
  width: 100%;
  height: 300px;
  position: absolute;
  top: -1px;
}
.hoverBtn:before {
  position: absolute;
  content: '';
  height: 0;
  width: 0;
  display: block;
  opacity: 0;
  border-top: solid 2px #517180;
  border-left: solid 2px #517180;
  -webkit-border-top-left-radius: 5px;
  -moz-border-top-left-radius: 5px;
  border-top-left-radius: 5px;
  -webkit-border-bottom-left-radius: 5px;
  -moz-border-bottom-left-radius: 5px;
  border-bottom-left-radius: 5px;
  right: 175px;
}
.hoverBtn:after {
  position: absolute;
  content: '';
  height: 0;
  width: 0;
  display: block;
  opacity: 0;
  border-top: solid 2px #517180;
  border-right: solid 2px #517180;
  -webkit-border-top-right-radius: 5px;
  -moz-border-top-right-radius: 5px;
  border-top-right-radius: 5px;
  -webkit-border-bottom-right-radius: 5px;
  -moz-border-bottom-right-radius: 5px;
  border-bottom-right-radius: 5px;
  left: 175px;
}

.hoverBtn-bottom {
  width: 100%;
  height: 300px;
  position: absolute;
}
.hoverBtn-bottom:before {
  position: absolute;
  content: '';
  height: 0;
  width: 0;
  display: block;
  opacity: 0;
  height: 300px;
  border-bottom: solid 2px #517180;
  -webkit-border-top-right-radius: 5px;
  -moz-border-top-right-radius: 5px;
  border-top-right-radius: 5px;
  -webkit-border-bottom-right-radius: 5px;
  -moz-border-bottom-right-radius: 5px;
  border-bottom-right-radius: 5px;
  right: 0;
}
.hoverBtn-bottom:after {
  position: absolute;
  content: '';
  height: 0;
  width: 0;
  display: block;
  opacity: 0;
  height: 300px;
  border-bottom: solid 2px #517180;
  -webkit-border-top-left-radius: 5px;
  -moz-border-top-left-radius: 5px;
  border-top-left-radius: 5px;
  -webkit-border-bottom-left-radius: 5px;
  -moz-border-bottom-left-radius: 5px;
  border-bottom-left-radius: 5px;
  left: 0;
}


@keyframes open {
  0% {
    width: 0;
    height: 0;
  }
  50% {
    width: 175px;
    height: 0;
  }
  100% {
    width: 175px;
    height: 300px;
  }
}
@keyframes openB {
  0% {
    width: 0px;
  }
  100% {
    width: 175px;
  }
}
<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Square border animation</title>
  <link rel="stylesheet" href="css/style.css">
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>

<body>



<div id="target">
  Click here
</div>


  <div id="myButton" class="button">
    <a href="#">
        <div class="hoverBtn"></div>
        <div class="hoverBtn-bottom"></div>
     </a>
  </div>
  <script>
$( "#target" ).click(function() {
  alert( "Handler for .click() called." );
});
</script>
  
</body>
</html>

现已提供所有代码。

我希望使用JS / jquery来启动当前在悬停时启动的动画。

我已经尝试了下面的一些灵魂，但不确定如何实现类更改。

此致

乔纳森。

1 个答案:

答案 0 :(得分：1)

在我开始之前，我在vanila js写了这个，因为我不熟悉jquery，如果你真的想要我可以搜索jquery语法，但现在至少掌握这个概念。

您必须做的基本事情是以下结构

var button = document.querySelector('#myButton');
if(button.classList.contains('animBorder')){
    button.classList.remove('animBorder');
}else{ 
    button.classList.add('animBorder');
}

您需要更改：hover for class（在我的示例中名为＆＃39; .animBorder＆＃39;）然后检查是否该类是否处于活动状态，并相应地添加/删除该类。

让我知道如果您需要更多解释，我会进行编辑。

这是一个正在运行的例子：

＆＃13;
＆＃13; 
function _$(str){ return document.querySelector(str); }

_$('#target').addEventListener('click', doClick);

function doClick(e){
  var bcl = _$('#myButton').classList
  bcl[bcl.contains('animBorder')?'remove':'add']('animBorder');
}
＆＃13; 
.button {
  width: 350px;
  height: 300px;
  margin: 100px auto;
  position: relative;
  border: solid 2px #cbd4d9;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}
.button.animBorder .hoverBtn:before, 
.button.animBorder .hoverBtn:after {
  opacity: 1;
  -webkit-animation: open 0.8s;
  /* Chrome, Safari, Opera */
  animation: open 0.8s;
  animation-fill-mode: forwards;
  animation-timing-function: cubic-bezier(0.39, 0.575, 0.565, 1);
  animation-direction: normal;
}
.button.animBorder .hoverBtn-bottom:before, 
.button.animBorder .hoverBtn-bottom:after {
  opacity: 1;
  -webkit-animation: openB 0.8s;
  /* Chrome, Safari, Opera */
  animation: openB 0.8s;
  animation-delay: 0.8s;
  animation-fill-mode: forwards;
  animation-timing-function: cubic-bezier(0.39, 0.575, 0.565, 1);
  animation-direction: normal;
}
.hoverBtn {
  width: 100%;
  height: 300px;
  position: absolute;
  top: -1px;
}
.hoverBtn:before {
  position: absolute;
  content: '';
  height: 0;
  width: 0;
  display: block;
  opacity: 0;
  border-top: solid 2px #517180;
  border-left: solid 2px #517180;
  -webkit-border-top-left-radius: 5px;
  -moz-border-top-left-radius: 5px;
  border-top-left-radius: 5px;
  -webkit-border-bottom-left-radius: 5px;
  -moz-border-bottom-left-radius: 5px;
  border-bottom-left-radius: 5px;
  right: 175px;
}
.hoverBtn:after {
  position: absolute;
  content: '';
  height: 0;
  width: 0;
  display: block;
  opacity: 0;
  border-top: solid 2px #517180;
  border-right: solid 2px #517180;
  -webkit-border-top-right-radius: 5px;
  -moz-border-top-right-radius: 5px;
  border-top-right-radius: 5px;
  -webkit-border-bottom-right-radius: 5px;
  -moz-border-bottom-right-radius: 5px;
  border-bottom-right-radius: 5px;
  left: 175px;
}
.hoverBtn-bottom {
  width: 100%;
  height: 300px;
  position: absolute;
}
.hoverBtn-bottom:before {
  position: absolute;
  content: '';
  height: 0;
  width: 0;
  display: block;
  opacity: 0;
  height: 300px;
  border-bottom: solid 2px #517180;
  -webkit-border-top-right-radius: 5px;
  -moz-border-top-right-radius: 5px;
  border-top-right-radius: 5px;
  -webkit-border-bottom-right-radius: 5px;
  -moz-border-bottom-right-radius: 5px;
  border-bottom-right-radius: 5px;
  right: 0;
}
.hoverBtn-bottom:after {
  position: absolute;
  content: '';
  height: 0;
  width: 0;
  display: block;
  opacity: 0;
  height: 300px;
  border-bottom: solid 2px #517180;
  -webkit-border-top-left-radius: 5px;
  -moz-border-top-left-radius: 5px;
  border-top-left-radius: 5px;
  -webkit-border-bottom-left-radius: 5px;
  -moz-border-bottom-left-radius: 5px;
  border-bottom-left-radius: 5px;
  left: 0;
}
@keyframes open {
  0% {
    width: 0;
    height: 0;
  }
  50% {
    width: 175px;
    height: 0;
  }
  100% {
    width: 175px;
    height: 300px;
  }
}
@keyframes openB {
  0% {
    width: 0px;
  }
  100% {
    width: 175px;
  }
}
＆＃13; 
<div id="target">Click here</div>
<div id="myButton" class="button">
  <a href="#">
      <div class="hoverBtn"></div>
      <div class="hoverBtn-bottom"></div>
   </a>
</div>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题