老化文本动画效果不佳

时间：2017-07-12 23:11:38

标签： javascript jquery html5 css3

我想有人看看我的代码，并告诉我如何强制我的文本动画淡出汉堡包菜单点击事件，但只是以相同的方式淡入。我尝试了许多不同的变化，但没有任何作品。 任何帮助表示赞赏。

＆＃13;
＆＃13; 
$(document).ready(function () {
	/* hamburger menu */
	$('.menuToggle').hover(function () {
		$('.menuToggle span').toggleClass('spanWithShadow');
		$(this).toggleClass('menuTransform');
		$(this).click(function () {
			var $this = $(this);
			if ($this.hasClass('active')) {
				$this.removeClass('active');
				flag = false;
				headerText();
			}
			else {
				$this.addClass('active');
				flag = true;
				headerText();
			}
		});
	});
});
/*header text*/
var flag = true;
var headerText = function () {
	var $about, $work, $contact;
	var s,
		textLetters = {
			settings: {
				lettersAbout: $('.js-about'),
				lettersWork: $('.js-work'),
				lettersContact: $('.js-contact'),
			},
			init: function () {
				s = this.settings;
				this.bindEvents();
			},
			bindEvents: function () {
				if (flag == true) {
					$about = $('.js-about').text('About');
					$work = $('.js-work').text('Work');
					$contact = $('.js-contact').text('Contact');
					s.lettersAbout.html(function (i, el) {
						var text = $.trim(el).split("");
						return '<span>' + text.join('</span><span>') + '</span>';
					});
					s.lettersWork.html(function (i, el) {
						text = $.trim(el).split("");
						return '<span>' + text.join('</span><span>') + '</span>';
					});
					s.lettersContact.html(function (i, el) {
						text = $.trim(el).split("");
						return '<span>' + text.join('</span><span>') + '</span>';
					});
				}
				else {
					$about = $('.js-about').text('');
					$work = $('.js-work').text('');
					$contact = $('.js-contact').text('');
					s.lettersAbout.html(function (i, el) {
						text = $.trim(el).split("");
						return text;
					});
					s.lettersWork.html(function (i, el) {
						text = $.trim(el).split("");
						return text;
					});
					s.lettersContact.html(function (i, el) {
						text = $.trim(el).split("");
						return text;
					});
				}
			},
		};
	textLetters.init();
};
＆＃13; 
html,body {
   height: 100%;
   box-sizing: border-box;
   font-family: Arial, Helvetica, sans-serif;
   margin: 0;
}

body {
	 background-color: rgba(41.5%, 53.7%, 95.5%,0.17);
}

 @font-face {
  font-family: Arial, Helvetica, sans-serif;

}

.header {
 height: 74.64px;
 display: flex;
 max-width: 1200px;
 margin: 0 auto;
 font-size: 1.8em;
 text-align: center;
}

/*Hamburger menu*/
.menuToggle {
  cursor: pointer;
  display: flex;
  width:  52.654px;
  height: 52.654px;
  position: relative;
  padding: 18.66px 0 0 10.66px;
}

.menuToggle span {
  display: block;
  height: 0.4rem;
  position: absolute;
  width: 3rem;
  -webkit-transition: margin .3s ease-in-out, width .3s ease-in-out, -webkit-transform .3s ease-in-out;
  transition: margin .3s ease-in-out, width .3s ease-in-out, -webkit-transform .3s ease-in-out;
  transition: margin .3s ease-in-out, width .3s ease-in-out, transform .3s ease-in-out;
  transition: margin .3s ease-in-out, width .3s ease-in-out, transform .3s ease-in-out, -webkit-transform .3s ease-in-out;
}

.menuToggle span:nth-child(2) {
  margin-top: 0.9rem;
}

.menuToggle span:nth-child(3) {
  margin-top: 1.8rem;
}

.menuToggle.active span:nth-child(odd) {
  margin-left: 1.5rem;
  width: 1.5rem;
}

.menuToggle.active span:nth-child(1) {
  margin-top: 0.6rem;
  -webkit-transform: rotate(30deg);
  transform: rotate(30deg);
  z-index: 0;
}

.menuToggle.active span:nth-child(3) {
  margin-top: 1.3rem;
  -webkit-transform: rotate(-30deg);
  transform: rotate(-30deg);
  z-index: 0;
}

.menuToggle span {
  background-color: rgba(17.3%, 24.3%, 31.4%, 0.9);
  border-radius: 5px;
}

.menuToggle.active span {
  background-color: rgba(17.3%, 24.3%, 31.4%, 0.9);
  z-index: 1;
}

.spanWithShadow{
   -moz-box-shadow: 0px 0px 4px 4px rgba(255,255,255,0.6),0px 0px 4px 4px rgba(255,255,255,0.6);
   -webkit-box-shadow: 0px 0px 4px 4px rgba(255,255,255,0.6),0px 0px 4px 4px rgba(255,255,255,0.6);
   box-shadow: 0px 0px 4px 4px rgba(255,255,255,0.6),0px 0px 4px 4px rgba(255,255,255,0.6);
}

.menuTransform {
   transform: scale(1.07);
  -webkit-transform: scale(1.07);
  -moz-transform: scale(1.07);
}

/*header letters    */
.menu__header {
 display: flex;
 width: 100%;
 justify-content: space-around;
}

.menu__about {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 80%;
  align-self: center;
}

.menu__about span {
  -webkit-animation: letter-glow 0.7s 0s ease both;
          animation: letter-glow 0.7s 0s ease both;
}
.menu__about span:nth-child(1) {
  -webkit-animation-delay: 0.05s;
          animation-delay: 0.05s;
}
.menu__about span:nth-child(2) {
  -webkit-animation-delay: 0.1s;
          animation-delay: 0.1s;
}
.menu__about span:nth-child(3) {
  -webkit-animation-delay: 0.15s;
          animation-delay: 0.15s;
}
.menu__about span:nth-child(4) {
  -webkit-animation-delay: 0.2s;
          animation-delay: 0.2s;
}
.menu__about span:nth-child(5) {
  -webkit-animation-delay: 0.25s;
          animation-delay: 0.25s;
}


.menu__work {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 80%;
  align-self: center;
}

.menu__work span {
  -webkit-animation: letter-glow 0.6s 0s ease both;
          animation: letter-glow 0.6s 0s ease both;
}
.menu__work span:nth-child(1) {
  -webkit-animation-delay: 0.30s;
          animation-delay: 0.30s;
}
.menu__work span:nth-child(2) {
  -webkit-animation-delay: 0.35s;
          animation-delay: 0.35s;
}
.menu__work span:nth-child(3) {
  -webkit-animation-delay: 0.40s;
          animation-delay: 0.40s;
}
.menu__work span:nth-child(4) {
  -webkit-animation-delay: 0.45s;
          animation-delay: 0.45s;
}

.menu__contact {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 80%;
  align-self: center;
}

.menu__contact span {
  -webkit-animation: letter-glow 0.9s 0s ease both;
          animation: letter-glow 0.9s 0s ease both;
}
.menu__contact span:nth-child(1) {
  -webkit-animation-delay: 0.50s;
          animation-delay: 0.50s;
}
.menu__contact span:nth-child(2) {
  -webkit-animation-delay: 0.55s;
          animation-delay: 0.55s;
}
.menu__contact span:nth-child(3) {
  -webkit-animation-delay: 0.60s;
          animation-delay: 0.60s;
}
.menu__contact span:nth-child(4) {
  -webkit-animation-delay: 0.65s;
          animation-delay: 0.65s;
}
.menu__contact span:nth-child(5) {
  -webkit-animation-delay: 0.70s;
          animation-delay: 0.70s;
}

.menu__contact span:nth-child(6) {
  -webkit-animation-delay: 0.75s;
          animation-delay: 0.75s;
}
.menu__contact span:nth-child(7) {
  -webkit-animation-delay: 0.80s;
          animation-delay: 0.80s;
}

@-webkit-keyframes letter-glow {
  0% {
    opacity: 0;
    text-shadow: 0px 0px 1px rgba(255, 255, 255, 0.1);
  }
  66% {
    opacity: 1;
    text-shadow: 0px 0px 20px rgba(255, 255, 255, 0.9);
  }
  77% {
    opacity: 1;
  }
  100% {
    opacity: 0.8;
    text-shadow: 0px 0px 20px rgba(255, 255, 255, 0);
  }
}

@keyframes letter-glow {
  0% {
    opacity: 0;
    text-shadow: 0px 0px 1px rgba(255, 255, 255, 0.1);
  }
  66% {
    opacity: 1;
    text-shadow: 0px 0px 20px rgba(255, 255, 255, 0.9);
  }
  77% {
    opacity: 1;
  }
  100% {
    opacity: 0.8;
    text-shadow: 0px 0px 20px rgba(255, 255, 255, 0);
  }
}
＆＃13; 
<body>
  <header>
    <div class="header">
      <div class="menuToggle">
        <span></span>
        <span></span>
        <span></span>
      </div>
      <div class="menu__header">
        <p class="menu__about js-about">
        </p>
        <p class="menu__work js-work">
        </p>
        <p class="menu__contact js-contact"> 
        </p>
      </div>
    </div>
  </header>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</body>
＆＃13;
＆＃13;
＆＃13;

1 个答案:

答案 0 :(得分：0)

现在，如果flag == false，您似乎正在使用javascript删除菜单中的文字。所以你的文字只是从页面上消失而不是动画出来。

您需要在CSS中编写一个反转当前动画的动画。然后你可以用Javascript激活那个动画，当动画完成后，然后删除文本。

相关问题
最新问题