バーンインテキストアニメーションがうまくいきません

私のコードを見て、ハンバーガーメニューのクリックイベントでテキストアニメーションをフェードアウトさせる方法を教えてください私はさまざまなバリエーションを試しましたが、何も動作しません。何か助けていただければ幸いです。今バーンインテキストアニメーションがうまくいきません

$(document).ready(function() { 
 
\t /* hamburger menu */ 
 
\t $('.menuToggle').hover(function() { 
 
\t \t $('.menuToggle span').toggleClass('spanWithShadow'); 
 
\t \t $(this).toggleClass('menuTransform'); 
 
\t \t $(this).click(function() { 
 
\t \t \t var $this = $(this); 
 
\t \t \t if ($this.hasClass('active')) { 
 
\t \t \t \t $this.removeClass('active'); 
 
\t \t \t \t flag = false; 
 
\t \t \t \t headerText(); 
 
\t \t \t } 
 
\t \t \t else { 
 
\t \t \t \t $this.addClass('active'); 
 
\t \t \t \t flag = true; 
 
\t \t \t \t headerText(); 
 
\t \t \t } 
 
\t \t }); 
 
\t }); 
 
}); 
 
/*header text*/ 
 
var flag = true; 
 
var headerText = function() { 
 
\t var $about, $work, $contact; 
 
\t var s, 
 
\t \t textLetters = { 
 
\t \t \t settings: { 
 
\t \t \t \t lettersAbout: $('.js-about'), 
 
\t \t \t \t lettersWork: $('.js-work'), 
 
\t \t \t \t lettersContact: $('.js-contact'), 
 
\t \t \t }, 
 
\t \t \t init: function() { 
 
\t \t \t \t s = this.settings; 
 
\t \t \t \t this.bindEvents(); 
 
\t \t \t }, 
 
\t \t \t bindEvents: function() { 
 
\t \t \t \t if (flag == true) { 
 
\t \t \t \t \t $about = $('.js-about').text('About'); 
 
\t \t \t \t \t $work = $('.js-work').text('Work'); 
 
\t \t \t \t \t $contact = $('.js-contact').text('Contact'); 
 
\t \t \t \t \t s.lettersAbout.html(function (i, el) { 
 
\t \t \t \t \t \t var text = $.trim(el).split(""); 
 
\t \t \t \t \t \t return '<span>' + text.join('</span><span>') + '</span>'; 
 
\t \t \t \t \t }); 
 
\t \t \t \t \t s.lettersWork.html(function (i, el) { 
 
\t \t \t \t \t \t text = $.trim(el).split(""); 
 
\t \t \t \t \t \t return '<span>' + text.join('</span><span>') + '</span>'; 
 
\t \t \t \t \t }); 
 
\t \t \t \t \t s.lettersContact.html(function (i, el) { 
 
\t \t \t \t \t \t text = $.trim(el).split(""); 
 
\t \t \t \t \t \t return '<span>' + text.join('</span><span>') + '</span>'; 
 
\t \t \t \t \t }); 
 
\t \t \t \t } 
 
\t \t \t \t else { 
 
\t \t \t \t \t $about = $('.js-about').text(''); 
 
\t \t \t \t \t $work = $('.js-work').text(''); 
 
\t \t \t \t \t $contact = $('.js-contact').text(''); 
 
\t \t \t \t \t s.lettersAbout.html(function (i, el) { 
 
\t \t \t \t \t \t text = $.trim(el).split(""); 
 
\t \t \t \t \t \t return text; 
 
\t \t \t \t \t }); 
 
\t \t \t \t \t s.lettersWork.html(function (i, el) { 
 
\t \t \t \t \t \t text = $.trim(el).split(""); 
 
\t \t \t \t \t \t return text; 
 
\t \t \t \t \t }); 
 
\t \t \t \t \t s.lettersContact.html(function (i, el) { 
 
\t \t \t \t \t \t text = $.trim(el).split(""); 
 
\t \t \t \t \t \t return text; 
 
\t \t \t \t \t }); 
 
\t \t \t \t } 
 
\t \t \t }, 
 
\t \t }; 
 
\t textLetters.init(); 
 
};

html,body { 
 
    height: 100%; 
 
    box-sizing: border-box; 
 
    font-family: Arial, Helvetica, sans-serif; 
 
    margin: 0; 
 
} 
 

 
body { 
 
\t 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); 
 
    } 
 
}

<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>

出典

2017-07-12 Wladimir Yovchenko

あなたはflag == false場合はJavaScriptを使用して、メニュー内のテキストを削除しているように、それが見えます。だからあなたのテキストはアニメーション化するのではなくページから消えていくだけです。

現在のアニメーションを逆転させるアニメーションをCSSに書き込む必要があります。アニメーションが完了したら、、のテキストを削除して、アニメーションをJavascriptでアクティブにできます。

出典

2017-07-12 23:33:26

Katnissの提案をありがとうございます。技術的には、テキストは同様の方法で表示され、その後はすぐにアニメーションが開始されます。 –

@keyframes textDisappearing { 0％{ 不透明度：0.8; text-shadow：0px 0px 1px rgba（255、255、255、0.1）; } 66％{ 不透明度：1; text-shadow：0px 0px 20px rgba（255、255、255、0.9）; } 77％{ 不透明度：1; } 100％{ 不透明度：0; text-shadow：0px 0px 20px rgba（255、255、255、0）; } } –

バーンインテキストアニメーションがうまくいきません

答えて

関連する問題