jQuery切换和动画行为问题

时间：2017-10-22 10:52:52

标签： javascript jquery html css

我正在使用个人资料卡UI。我遇到了jQuery类切换行为的问题 这是我的HTML：

$(document).ready(function() {
  $('.CTA').click(function() {
    $('.SocialCard').toggleClass('Transforming-Forward');
    setTimeout(function() {
      $('.SocialCard').toggleClass('Transformed');
      $('.SocialIconsWrapper').toggleClass('SocialIcons-Block');
      $('.CloseBtn').toggleClass('Block');
    }, 320);
  });

  $('.CloseBtn').click(function() {
    $('.SocialCard').toggleClass('Transforming-Forward');
    $('.SocialCard').toggleClass('Transforming-Reverse');
    setTimeout(function() {
      $('.SocialCard').toggleClass('Transformed');
      $('.SocialIconsWrapper').toggleClass('SocialIcons-Block');
      $('.CloseBtn').toggleClass('Block');
    }, 320);
  });
});
.Wrapper {
  width: 360px;
  height: 640px;
  background: linear-gradient(rgba(250, 250, 250, 0.0), rgba(47, 27, 86, 0.6));
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  max-width: 100%;
  max-height: 100%;
  border-radius: 5px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
  overflow: hidden;
}


.InfoCard {
  width: 90%;
  height: 150px;
  background-color: #FFFFFF;
  border-radius: 5px;
  margin-right: 5%;
  margin-left: 5%;
  position: absolute;
  top: 70%;
  z-index: 0;
}

.NameHeading,
.SocialHeading {
  font-size: 32px;
  font-weight: normal;
  text-align: center;
  padding: 5px;
}

.Profession {
  font-style: 22px;
  font-weight: lighter;
  text-align: center;
  padding: 5px;
}

.Address {
  font-size: 22px;
  font-weight: lighter;
  text-align: center;
  padding: 5px;
}

.Address i {
  color: #E52E67;
}

.CTA,
.CloseBtn {
  width: 60px;
  height: 60px;
  background-color: #E52E67;
  border: none;
  border-radius: 100%;
  position: absolute;
  top: 88%;
  right: 10%;
  outline: none;
  cursor: pointer;
  z-index: 2;
  font-size: 22px;
  color: #FFFFFF;
}

.CTA i,
.CloseBtn i {
  display: flex;
  justify-content: center;
  align-items: center;
}

.CloseBtn {
  display: none;
  z-index: -1;
}

.Block {
  display: block;
  z-index: 3;
}

.SocialCard {
  width: 60px;
  height: 60px;
  background-color: #DDDDDD;
  border-radius: 100%;
  position: absolute;
  top: 88%;
  right: 10%;
  z-index: 2;
}

.Transformed {
  width: 360px;
  height: 640px;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  max-width: 100%;
  max-height: 100%;
  border-radius: 5px;
  z-index: 3;
}

.Transforming-Forward {
  -webkit-animation: TransforminationForward 0.5s ease-in;
  -o-animation: TransforminationForward 0.5s ease-in;
  animation: TransformationForward 0.5s ease-in;
}

.Transforming-Reverse {
  -webkit-animation: TransforminationReverse 0.5s ease-in;
  -o-animation: TransforminationReverse 0.5s ease-in;
  animation: TransformationReverse 0.5s ease-in;
}

@keyframes TransformationForward {
  25% {
    width: 100px;
    height: 100px;
  }

  50% {
    width: 200px;
    height: 200px;
  }

  75% {
    width: 320px;
    height: 320px;
    top: 25%;
  }

  100% {
    width: 360px;
    height: 640px;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    max-width: 100%;
    max-height: 100%;
    border-radius: 5px;
  }
}

@keyframes TransformationReverse {
  25% {
    width: 360px;
    height: 640px;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    max-width: 100%;
    max-height: 100%;
    border-radius: 5px;
  }

  50% {
    width: 320px;
    height: 320px;
    top: 25%;
  }

  75% {
    width: 200px;
    height: 200px;
  }

  100% {
    width: 100px;
    height: 100px;
  }
}

.SocialIcons-Block {
  display: block !important;
}

.SocialIconsWrapper {
  width: 100%;
  display: none;
  text-align: center;
  position: absolute;
  top: 30%;
}

.SocialIconsWrapper ul {
  list-style-type: none;
}

.SocialIconsWrapper ul li {
  display: inline-block;
  margin: 10px;
  text-align: center;
  vertical-align: middle;
  line-height: 40px;
}

.SocialIcon {
  width: 40px;
  height: 40px;
  background-color: #E52E67;  
  font-size: 24px;
  color: #FFFFFF;
}
<link href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="Wrapper">
  <div class="InfoCard">
    <h1 class="NameHeading">Zaryab Waseem</h1>
    <p class="Profession">Front-End Developer</p>
    <p class="Address"><i class="ion ion-ios-location"></i> Karachi, Pakistan</p>
  </div>
  <div class="SocialCard">
    <div class="SocialIconsWrapper">
      <h1 class="SocialHeading">Follow Me</h1>
      <ul>
        <li><i class="ion ion-social-facebook SocialIcon"></i></li>
        <li><i class="ion ion-social-twitter SocialIcon"></i></li>
        <li><i class="ion ion-social-youtube SocialIcon"></i></li>
        <li><i class="ion ion-social-github SocialIcon"></i></li>
        <li><i class="ion ion-social-codepen SocialIcon"></i></li>
      </ul>
    </div>
  </div>
  <button class="CloseBtn"><i class="ion ion-close-round"></i></button>
  <button class="CTA"><i class="ion ion-plus-round"></i></button>
</section>

这里的问题是当用户打开和关闭卡片时，动画行为会发生一次。显而易见，我的JS中存在一些错误，但我无法弄明白 请帮我解决这个错误。
感谢。

1 个答案:

答案 0 :(得分：4)

您通过使用toggleClass而不是明确指定所需状态来搞乱CSS类状态。在重构之后，您的代码看起来也会更简单：

＆＃13;
＆＃13; 
$(document).ready(function () {

    function cardDisplayed(state) {
        $('.SocialCard').toggleClass('Transformed', state);
        $('.SocialIconsWrapper').toggleClass('SocialIcons-Block', state);
        $('.CloseBtn').toggleClass('Block', state);
    }

    function runAnimation(forward) {
        var animation = forward ? 'Transforming-Forward' : 'Transforming-Reverse';
        $('.SocialCard').addClass(animation);
        setTimeout(function () {
            $('.SocialCard').removeClass(animation);
            cardDisplayed(forward);
        }, 320);
    }

    $('.CTA').click(function () {
        runAnimation(true);
    });

    $('.CloseBtn').click(function () {
        runAnimation(false);
    });
});
＆＃13; 
.Wrapper {
    width: 360px;
    height: 640px;
    background: linear-gradient(rgba(250, 250, 250, 0.0), rgba(47, 27, 86, 0.6));
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    max-width: 100%;
    max-height: 100%;
    border-radius: 5px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
    overflow: hidden;
}


.InfoCard {
    width: 90%;
    height: 150px;
    background-color: #FFFFFF;
    border-radius: 5px;
    margin-right: 5%;
    margin-left: 5%;
    position: absolute;
    top: 70%;
    z-index: 0;
}

.NameHeading,
.SocialHeading {
    font-size: 32px;
    font-weight: normal;
    text-align: center;
    padding: 5px;
}

.Profession {
    font-style: 22px;
    font-weight: lighter;
    text-align: center;
    padding: 5px;
}

.Address {
    font-size: 22px;
    font-weight: lighter;
    text-align: center;
    padding: 5px;
}

.Address i {
    color: #E52E67;
}

.CTA,
.CloseBtn {
    width: 60px;
    height: 60px;
    background-color: #E52E67;
    border: none;
    border-radius: 100%;
    position: absolute;
    top: 88%;
    right: 10%;
    outline: none;
    cursor: pointer;
    z-index: 2;

    font-size: 22px;
    color: #FFFFFF;
}

.CTA i,
.CloseBtn i {
    display: flex;
    justify-content: center;
    align-items: center;
}

.CloseBtn {
	display: none;
	z-index: -1;
}

.Block {
	display: block;
	z-index: 3;
}

.SocialCard {
    width: 60px;
    height: 60px;
    background-color: #DDDDDD;
    border-radius: 100%;
    position: absolute;
    top: 88%;
    right: 10%;
    z-index: 2;
}

.Transformed {
    width: 360px;
    height: 640px;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    max-width: 100%;
    max-height: 100%;
    border-radius: 5px;
    z-index: 3;
}

.Transforming-Forward {
    -webkit-animation: TransforminationForward 0.5s ease-in;
    -o-animation: TransforminationForward 0.5s ease-in;
    animation: TransformationForward 0.5s ease-in;
}

.Transforming-Reverse {
    -webkit-animation: TransforminationReverse 0.5s ease-in;
    -o-animation: TransforminationReverse 0.5s ease-in;
    animation: TransformationReverse 0.5s ease-in;
}

@keyframes TransformationForward {
    25% {
        width: 100px;
        height: 100px;
    }

    50% {
        width: 200px;
        height: 200px;
    }

    75% {
        width: 320px;
        height: 320px;
        top: 25%;
    }

    100% {
        width: 360px;
        height: 640px;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
        max-width: 100%;
        max-height: 100%;
        border-radius: 5px;
    }
}

@keyframes TransformationReverse {
    25% {
        width: 360px;
        height: 640px;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
        max-width: 100%;
        max-height: 100%;
        border-radius: 5px;
    }

    50% {
        width: 320px;
        height: 320px;
        top: 25%;
    }

    75% {
        width: 200px;
        height: 200px;
    }

    100% {
        width: 100px;
        height: 100px;
    }
}

.SocialIcons-Block {
	display: block !important;
}

.SocialIconsWrapper {
	width: 100%;
    display: none;
    text-align: center;
    position: absolute;
    top: 30%;
}

.SocialIconsWrapper ul {
	list-style-type: none;
}

.SocialIconsWrapper ul li {
	display: inline-block;
	margin: 10px;
	text-align: center;
    vertical-align: middle;
    line-height: 40px;
}

.SocialIcon {
    width: 40px;
    height: 40px;
    background-color: #E52E67;
    
    font-size: 24px;
    color: #FFFFFF;
}
＆＃13; 
<link href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="Wrapper">
        <div class="InfoCard">
            <h1 class="NameHeading">Zaryab Waseem</h1>
            <p class="Profession">Front-End Developer</p>
            <p class="Address"><i class="ion ion-ios-location"></i> Karachi, Pakistan</p>
        </div>
        <div class="SocialCard">
            <div class="SocialIconsWrapper">
                <h1 class="SocialHeading">Follow Me</h1>
                <ul>
                	<li><i class="ion ion-social-facebook SocialIcon"></i></li>
                	<li><i class="ion ion-social-twitter SocialIcon"></i></li>
                	<li><i class="ion ion-social-youtube SocialIcon"></i></li>
                	<li><i class="ion ion-social-github SocialIcon"></i></li>
                	<li><i class="ion ion-social-codepen SocialIcon"></i></li>
                </ul>
            </div>
        </div>
        <button class="CloseBtn"><i class="ion ion-close-round"></i></button>
        <button class="CTA"><i class="ion ion-plus-round"></i></button>
    </section>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题