使用JavaScript删除-webkit转换/转换类

时间：2015-10-24 00:11:29

标签： javascript css webkit removeclass

我尝试创建一个不断扩展的列布局：当您将鼠标悬停在图片上时，它会模糊并缩放，当您点击它时，它会展开。

我尝试在图片展开后删除模糊和缩放效果。

我尝试过removeProp（）和document.getElementById（＆＃39;＆＃39;）。style.setProperty（＆＃34; webkit-filter＆＃34;，＆＃34; none＆＃34;但是他们都没有工作。

任何见解或提示都将非常感谢!!!

谢谢：）

这是我的JS：

＆＃13;
＆＃13; 
var Expand = (function() {
  var tile = $('.photo');
  var tileLink = $('.photo > .photo-content');
  var tileText = tileLink.find('.photo-inner-text');
  var stripClose = $('.photo-close');
  var tileAnimate = ('.photo:hover');

  var expanded  = false;

  var open = function() {

    var tile = $(this).parent();

      if (!expanded) {
        tile.addClass('photo__expanded');
        // add delay to inner text
        tileText.css('transition', 'all .6s 1s cubic-bezier(0.23, 1, 0.32, 1)');
        stripClose.addClass('photo-close__show');
        stripClose.css('transition', 'all .6s 1s cubic-bezier(0.23, 1, 0.32, 1)');
        tileAnimate.removeProp('filter', '-webkit-filter');
        expanded = true;
      }
    };

  var close = function() {
    if (expanded) {
      tile.removeClass('photo__expanded');
      // remove delay from inner text
      tileText.css('transition', 'all 0.15s 0 cubic-bezier(0.23, 1, 0.32, 1)');
      stripClose.removeClass('photo-close__show');
      stripClose.css('transition', 'all 0.2s 0s cubic-bezier(0.23, 1, 0.32, 1)')
      expanded = false;
    }
  }

    var bindActions = function() {
      tileLink.on('click', open);
      stripClose.on('click', close);
    };

    var init = function() {
      bindActions();
    };

    return {
      init: init
    };

  }());

Expand.init();
＆＃13;
＆＃13;
＆＃13;

我的CSS（有点凌乱，我道歉）：

＆＃13;
＆＃13; 
@import url(https://fonts.googleapis.com/css?family=Oswald);

body {
  margin: 0;
  padding: 0;
  background-color: #000;
}

div {
  margin: 0;
  padding: 0;
}


.main-container {
  min-height: 100vh;
  text-align: center;
  overflow: hidden;
  color: white;
}


.photo {
  background-color: #0c2d50;
  will-change: width, left, z-index, height;
  position: absolute;
  width: 20%;
  min-height: 100vh;
  overflow: hidden;
  cursor: pointer;
  transition: 1s;
}

.photo:nth-child(1) {
  left: 0;
  background: url("../images/image1.jpg");
  background-size: cover;
}
.photo:nth-child(2) {
  left: 20vw;
  background: url("../images/image2.jpg");
  background-size: cover;
}
.photo:nth-child(3) {
  left: 40vw;
  background: url("../images/image3.jpg");
  background-size: cover;
}
.photo:nth-child(4) {
  left: 60vw;
  background: url("../images/image4.jpg");
  background-size: cover;
}
.photo:nth-child(5) {
  left: 80vw;
  background: url("../images/image1.jpg");
  background-size: cover;
}

.photo:active,
.photo:hover {
  opacity: 1;
  -webkit-filter: blur(5px);
  filter: blur(5px);
  -webkit-transform:scale(1.15); /* Safari and Chrome */
  -moz-transform:scale(1.15); /* Firefox */
  -ms-transform:scale(1.15); /* IE 9 */
  -o-transform:scale(1.15); /* Opera */
   transform:scale(1.15);
}

.photo {
  background-color: #000;
  height: 100vh;
  -webkit-transition: all .5s ease; /* Safari and Chrome */
  -moz-transition: all .5s ease; /* Firefox */
  -o-transition: all .5s ease; /* IE 9 */
  -ms-transition: all .5s ease; /* Opera */
  transition: all .5s ease;
}

.photo:nth-child(1) .photo-content {
  -webkit-transform: translate3d(-100%, 0, 0);
          transform: translate3d(-100%, 0, 0);
  -webkit-animation-name: photo1;
          animation-name: photo1;
  -webkit-animation-delay: 0.1s;
          animation-delay: 0.1s;
}
.photo:nth-child(2) .photo-content {
  -webkit-transform: translate3d(0, 100%, 0);
          transform: translate3d(0, 100%, 0);
  -webkit-animation-name: photo2;
          animation-name: photo2;
  -webkit-animation-delay: 0.2s;
          animation-delay: 0.2s;
}
.photo:nth-child(3) .photo-content {
  -webkit-transform: translate3d(0, -100%, 0);
          transform: translate3d(0, -100%, 0);
  -webkit-animation-name: photo3;
          animation-name: photo3;
  -webkit-animation-delay: 0.3s;
          animation-delay: 0.3s;
}
.photo:nth-child(4) .photo-content {
  -webkit-transform: translate3d(0, 100%, 0);
          transform: translate3d(0, 100%, 0);
  -webkit-animation-name: photo4;
          animation-name: photo4;
  -webkit-animation-delay: 0.4s;
          animation-delay: 0.4s;
}
.photo:nth-child(5) .photo-content {
  -webkit-transform: translate3d(100%, 0, 0);
          transform: translate3d(100%, 0, 0);
  -webkit-animation-name: photo5;
          animation-name: photo5;
  -webkit-animation-delay: 0.5s;
          animation-delay: 0.5s;
}

/*******************************************************
.photo  a:active img,
.photo a:hover img {
  opacity: .6;
  -webkit-filter: blur(5px);
  filter: blur(5px);
  -webkit-transform:scale(1.15); /* Safari and Chrome
  -moz-transform:scale(1.15); /* Firefox
  -ms-transform:scale(1.15); /* IE 9
  -o-transform:scale(1.15); /* Opera
   transform:scale(1.15);
}

.photo img {
  height: 100vh;
  -webkit-transition: all .5s ease; /* Safari and Chrome
  -moz-transition: all .5s ease; /* Firefox
  -o-transition: all .5s ease; /* IE 9
  -ms-transition: all .5s ease; /* Opera
  transition: all .5s ease;
}
****************************************************/

.photo-content {
  position:relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

/* text hidden */
.photo-title {
  color: #ffffff;
  text-align: center;
  font-family: 'Oswald';
  font-size: 4em;
  line-height: 1.2em;
  z-index: 1000;
  width: 100%;
  position: absolute;
  top: 60px;
  left: 10px;
  opacity: 0;
  -webkit-transition: all .5s ease; /* Safari and Chrome */
  -moz-transition: all .5s ease; /* Firefox */
  -o-transition: all .5s ease; /* IE 9 */
  -ms-transition: all .5s ease; /* Opera */
  transition: all .5s ease;
}

/* text shown on hover */
.photo a:active .photo-title,
.photo a:hover .photo-title {
  opacity: 1;
  -webkit-animation: flicker 2s infinite; /* Flicker effect */
  -webkit-transition: all 1.5s ease; /* Safari and Chrome */
  -moz-transition: all 1.5s ease; /* Firefox */
  -o-transition: all 1.5s ease; /* IE 9 */
  -ms-transition: all 1.5s ease; /* Opera */
  transition: all 1.5s ease;
}

@-webkit-keyframes flicker {
  0% {opacity:0;}
  9% {opacity:0;}
  10% {opacity:.5;}
  13% {opacity:0;}
  20% {opacity:.5;}
  25% {opacity:1;}
}

/* added for slider */
.main-container .photo-content {
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
  -webkit-animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
          animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-decoration: none;
}

.main-container .photo-content:before {
  content: "";
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
  opacity: 0.05;
  -webkit-transform-origin: center center;
      -ms-transform-origin: center center;
          transform-origin: center center;
  -webkit-transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
          transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}
.main-container .photo-inner-text {
  will-change: transform, opacity;
  position: absolute;
  z-index: 5;
  top: 50%;
  left: 50%;
  width: 70%;
  -webkit-transform: translate(-50%, -50%) scale(0.5);
      -ms-transform: translate(-50%, -50%) scale(0.5);
          transform: translate(-50%, -50%) scale(0.5);
  opacity: 0;
  -webkit-transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
          transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}

.photo__expanded {
  width: 100%;
  top: 0 !important;
  left: 0 !important;
  z-index: 3;
  cursor: default;
  min-height: 100vh;
}

.photo__expanded .photo-title {
  opacity: 0;
}

.photo__expanded .photo-inner-text {
  opacity: 1;
  -webkit-transform: translate(-50%, -50%) scale(1);
      -ms-transform: translate(-50%, -50%) scale(1);
          transform: translate(-50%, -50%) scale(1);
}

.photo-close {
  position: absolute;
  right: 3vw;
  top: 3vw;
  opacity: 0;
  z-index: 10;
  -webkit-transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
          transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
  cursor: pointer;
  -webkit-transition-delay: 0.5s;
          transition-delay: 0.5s;
}
.photo-close__show {
  opacity: 1;
}

@-webkit-keyframes photo1 {
  0% {
    -webkit-transform: translate3d(-100%, 0, 0);
            transform: translate3d(-100%, 0, 0);
  }
  100% {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
}

@keyframes photo1 {
  0% {
    -webkit-transform: translate3d(-100%, 0, 0);
            transform: translate3d(-100%, 0, 0);
  }
  100% {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
}
@-webkit-keyframes photo2 {
  0% {
    -webkit-transform: translate3d(0, 100%, 0);
            transform: translate3d(0, 100%, 0);
  }
  100% {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
}
@keyframes photo2 {
  0% {
    -webkit-transform: translate3d(0, 100%, 0);
            transform: translate3d(0, 100%, 0);
  }
  100% {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
}
@-webkit-keyframes photo3 {
  0% {
    -webkit-transform: translate3d(0, -100%, 0);
            transform: translate3d(0, -100%, 0);
  }
  100% {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
}
@keyframes photo3 {
  0% {
    -webkit-transform: translate3d(0, -100%, 0);
            transform: translate3d(0, -100%, 0);
  }
  100% {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
}
@-webkit-keyframes photo4 {
  0% {
    -webkit-transform: translate3d(0, 100%, 0);
            transform: translate3d(0, 100%, 0);
  }
  100% {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
}
@keyframes photo4 {
  0% {
    -webkit-transform: translate3d(0, 100%, 0);
            transform: translate3d(0, 100%, 0);
  }
  100% {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
}
@-webkit-keyframes photo5 {
  0% {
    -webkit-transform: translate3d(100%, 0, 0);
            transform: translate3d(100%, 0, 0);
  }
  100% {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
}
@keyframes photo5 {
  0% {
    -webkit-transform: translate3d(100%, 0, 0);
            transform: translate3d(100%, 0, 0);
  }
  100% {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
}


.fa {
  font-size: 30px;
  color: white;
}
＆＃13;
＆＃13;
＆＃13;

我的HTML：

＆＃13;
＆＃13; 
<!DOCTYPE html>
<html >
  <head>
    <meta charset="UTF-8">
    <title>Abtin Animation</title>
        <link rel="stylesheet" href="css/style.css">
        <link rel="stylesheet" href="css/bootloader.css">
  </head>

  <body>
    <section class="main-container">

        <article class="photo">
          <div class="photo-content">
            <div class="photo-title">LAUGH</div>
          </div>
        </article>

        <article class="photo">
            <div class="photo-content">
              <div class="photo-title">DREAM</div>
              <div class="photo-inner-text"><h1>hey</h1><p>testing</p></div>
            </div>
        </article>

        <article class="photo">
            <div class="photo-content">
              <div class="photo-title">LIVE</div>
            </div>
        </article>

        <article class="photo">
            <div class="photo-content">
              <div class="photo-title">PLAY</div>
            </div>
        </article>

        <article class="photo">
          <div class="photo-content">
            <div class="photo-title">LAUGH</div>
          </div>
        </article>

        <i class="fa fa-close photo-close"></i>
    </section>
    <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
    <script src="js/index.js"></script>
  </body>

</html>
＆＃13;
＆＃13;
＆＃13;

0 个答案:

没有答案
相关问题
最新问题