动画字母移除和容器大小

Question

我正在尝试为网站创建一个小介绍动画。我希望它在动画播放后平滑过渡到白色 BW 徽标。

我正在努力解决的问题是，一旦整个单词被删除，我希望 B 和 W 字母在单词的其余部分淡出后滑动到一起形成一个小的 BW。现在我似乎无法让容器顺利缩小并迫使 BW 紧挨着彼此。

我有一个codepen 开始供参考。 https://codepen.io/patstantpen/pen/eYExopN

$(document).ready(function () {
  $(".title").click(function () {
    $(".letter").css("color", "white");

    setTimeout(function () {
      $(".reak, .orld").css("opacity", "0");
    }, 1400);
  });
});

* {
  font-family: "Montserrat";
  font-weight: bold;
  font-size: 35px;
  height: 100%;
}

body {
  text-align: Center;
  height: 100%;
  background-color: #f7a21b;
}
.wrapper {
  display: flex;
  justify-content: center;
  height: 100%;
}
.title {
  height: 100px;
  align-self: center;
  color: #a71e29;
  height: 50px;
  transition: width 1.4s ease;
}
.letter {
  transition: color 1.4s ease;
}
.reak,
.orld {
  transition: opacity 1.4s ease;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat:400,400i,700">

<body>
  <div class='wrapper'>
    <div class='title'>
      <span class='letter'>B</span><span class='reak'>REAKFAST</span> <span class='letter'>W</span><span class='orld'>ORLDWIDE</span>
    </div>
  </div>

</body>

我想另一个更广泛的问题是将其制作为 mp4 或 gif 并播放而不是用 js 播放会更好吗？

Answer 1

你实际上可以用 CSS 做几乎所有事情：

$(document).ready(function () {
  $('.title').click(function () {
    $('.title').addClass('join');
  });
});

* {
  font-family: "Montserrat";
  font-weight: bold;
  font-size: 35px;
  height: 100%;
}

body {
  text-align: center;
  background-color: #f7a21b;
  margin: 0;
}

.wrapper {
  display: flex;
  justify-content: center;
}

.title {
  align-self: center;
  color: #a71e29;
  height: 50px;
  cursor: pointer;
}

.letter,
.reak,
.orld {
  white-space: pre;
  display: inline-block;
  max-width: 500px;   /* needs to be set manually to a sensible value =( */
  transition: color 1.4s ease, 
    opacity 1.4s ease 1.4s, 
    max-width 1.4s ease 2.8s;
}

.join .letter {
  color: white; 
}

.join .reak, 
.join .orld {
  opacity: 0;
  max-width: 0px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat:400,400i,700">

<body>
  <div class="wrapper">
    <div class="title">
      <span class="letter">B</span><span class="reak">REAKFAAAST </span><span class="letter">W</span><span class="orld">ORLDWIDE</span>
    </div>
  </div>

</body>

我加了更多的A，让两个字母连在一起的效果更明显。

Answer 2

您需要使用 animate() 将宽度和不透明度都设为 0。

https://api.jquery.com/animate/

并且您需要使用顶部垂直对齐规则将文本固定在顶部。

https://www.w3schools.com/cssref/pr_pos_vertical-align.asp

$(document).ready(function () {
  $(".title").click(function () {
    $(".letter").css("color", "white");

    setTimeout(function () {
      $(".reak, .orld").animate({'width': 0, 'opacity': 0}, 1000, function () {
        $(this).hide(); 
      });
    }, 1400);
  });
});

* {
  font-family: "Montserrat";
  font-weight: bold;
  font-size: 35px;
  height: 100%;
}

body {
  text-align: Center;
  height: 100%;
  background-color: #f7a21b;
}
.wrapper {
  display: flex;
  justify-content: center;
  height: 100%;
}
.title {
  height: 50px;
  align-self: center;
  color: #a71e29;
  transition: width 1.4s ease;
}
.letter {
  transition: color 1.4s ease;
}
.reak,
.orld {
  vertical-align: top;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat:400,400i,700">

<body>
  <div class='wrapper'>
    <div class='title'>
      <span class='letter'>B</span><span class='reak'>REAKFAST</span> <span class='letter'>W</span><span class='orld'>ORLDWIDE</span>
    </div>
  </div>

</body>

动画字母移除和容器大小

Animate letter removal and container size

javascript

css

jquery

animation