navメニューを開いたらテキストが横から中心までスライドするアニメーションを実装したい。

メニューを開くとtransformプロパティで右に寄せていたリンクが
中心に寄ってくるアニメーションを作成しているのですが、
transformは効いていますが設定されたアニメーションの方は
機能していません。お知恵をお貸しいただけるよう何卒宜しくお願い致します。

HTML5
1コード    <div class="nav-menu" data-open="false">
2    <nav class="inner">
3      <ul class="nav-menu-list">
4      <li class="list-item">
5        <a href="about.html" class="link">関連</a>
6      </li>
7    </ul>
8    </nav>
9  </div>
10  <header class="header">
11    <div class="header-menu">
12      <button class="header-menu-btn">
13        <span class="menu-text">MENU</span>
14      </button>
15    </div>
16  </header>

CSS3
1コード  .header-menu-btn {
2    position: relative;
3    width: 47px;
4    height: 42px;
5    display: block;
6    &:before,&:after {
7        content: "";
8        width: 85%;
9        height: 4px;
10        background: #000;
11        position: absolute;
12        left: 50%;
13        transform: translate(-50%,0);
14    }
15    &:before {
16        top: 5px;
17    }
18    &:after {
19        top: 20px;
20    }
21}
22
23.menu-text {
24    font-family: fantasy;
25    letter-spacing: 1;
26    display: block;
27    line-height: 1;
28    position: absolute;
29    top: 30px;
30    left: 10%;
31}
32
33// .nav-menu {
34//     position: relative;
35// }
36
37.nav-menu[data-open="false"] {
38    position: absolute;
39    top: 0;
40    left: 0;
41    width: 100%;
42    height: 100%;
43    overflow: hidden;
44    pointer-events: none;
45    opacity: 0;
46    // transition: opacity .2s ease-out;
47    background: #000;//このアニメーションにおいて必須
48    animation: .4s fade-out forwards;
49}
50
51.nav-menu[data-open="true"] {
52    display: block;
53    opacity: 0.5;
54    background: #000;
55    position: absolute;
56    left: 0;
57    top: 0;
58    width: 100%;
59    height: 100%;
60    animation: .4s fade-in forwards;
61}
62
63@keyframes fade-out{
640% {
65    opacity: 1;
66    display: block;
67}
6899% {
69    opacity: 0;
70    display: block;
71}
72100%{
73    opacity: 0;
74    display: none;
75}
76}
77@keyframes fade-in{
780% {
79    opacity: 0;
80    display: none;
81}
821% {
83    opacity: 0;
84    display: block;
85}
86100%{
87    opacity: 1;
88    display: block;
89}
90}
91
92.list-item {
93    list-style-type: none;
94}
95
96.nav-menu-list {
97    max-height: none;
98    width: 100%;
99}
100
101.inner {
102    width: 100%;
103    display: block;
104    position: absolute;
105    top: 50%;
106    left: 50%;
107    transform: translateX(100px);
108    // opacity: 0;
109    // margin: 100px auto;
110}
111
112.inner.fade {
113    // transform: translateX(0);
114    // transition: .4s all;//@keyflame
115    animation: .4s slide forwards;
116}
117
118@keyframes slide {
119    100% {
120        transform: translateX(0px);
121    }
122}
123
124a {
125    color: #ffffff;
126}

javascript
1コード  $(function() {
2    $(".header-menu").click(function() {
3      if ($(".nav-menu").attr("data-open") == "true") {
4        $(".nav-menu").attr("data-open", "false");
5      }
6      else {
7        $(".nav-menu").attr("data-open", "true");
8      }
9      return false;
10    }); 
11    $(".nav-menu").load(function() {
12      $(".inner").addClass(".fade");
13    });
14  });

行動規範の内容に同意します

回答2件

自己解決

animateメソッドを使用したらできました。

投稿2020/03/31 00:54

dream

総合スコア43

The load event is sent to an element when it and all sub-elements have been completely loaded. This event can be sent to any element associated with a URL: images, scripts, frames, iframes, and the window object.

.load() | jQuery API Documentation

とのこと。
.innerはURLに紐づいていないので、ロードイベントが起きないのでは？

解決方法ですが、クリックイベントの中に入れるしかないのでは？
あと、細かい点ですが、 $(".inner").addClass(".fade");のドットは余計です。

投稿2020/03/30 09:35