如何更改文本动画以使它们仅显示在自己的空间中？

Posted

技术标签:

【中文标题】如何更改文本动画以使它们仅显示在自己的空间中？【英文标题】：How can I change text animations so that they just show up in their own space? 【发布时间】：2020-10-13 21:25:19 【问题描述】：

我正在为我正在开发的网站添加一些带有 CSS 的动画。但是overflow: hidden 属性似乎并没有按我预期的方式工作。这是我的代码。

.jumbotron 
    height: 100%;
    height: 100vh;
    align-items: center;
    display: flex;
    position: relative;


.sty 
    display: inline-block;
    position: relative;


.sty1 
    position: relative;
    animation: firanim 1.5s ease-in-out;
    overflow: hidden;

.sty2 
    position: relative;
    animation: secanim 1s ease-in-out;
    overflow: hidden;


@keyframes firanim 
    from top:-50px;
    to top:0px;

@keyframes secanim 
    from left:-55vw;
    to left:0px;

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <!-- CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
    <link rel="stylesheet" href="css/style.css" type="text/css">
  <!-- EndCSS -->

    <title>lorem ipsum</title>
  </head>
  <body>
    <nav class="navbar navbar-expand-sm navbar-dark bg-dark text-white sticky-top">
        <a class="navbar-brand" href="#">Under Development</a>
        <button class="navbar-toggler d-lg-none" type="button" data-toggle="collapse" data-target="#collapsibleNavId" aria-controls="collapsibleNavId"
            aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
        <div class="collapse navbar-collapse justify-content-end" id="collapsibleNavId">
          <ul class="navbar-nav">
            <li class="nav-item">
              <a class="nav-link" href="#">About</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Follow</a>
            </li>
          </ul>
        </div>
    </nav>


    
    <div class="jumbotron justify-content-center">
      <div class="text-monospace sty">
        <h1 class="display-3">welcome<span class="text-danger">!</span></h1>
        <div class="sty1">
        <span class="lead">lorem ipsum lorem <span class="text-warning">LOREM IPSUM.</span></span>
        </div>
        <div class="sty2">
        <span class="lead">lorem ipsum lorem ipsum lorem.</span>
        </div>
      </div>
    </div>



<!-- JS -->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
<!-- EndJS -->
  </body>
</html>

那么我的代码中是否缺少任何其他类或我使用的任何错误？因为我期待带有.lead 类的span 元素只显示在他自己的空间中，而不是一些文本从某个地方飞到该地方。我希望你能得到我想说的。

【问题讨论】：

【参考方案1】：

您正在为整个框（.sty1 和 .sty2）设置动画，文本（.lead）不在（.sty1 和 .sty2）之外，这就是为什么 overflow: hidden 没有隐藏它

您需要将 (.sty1 和 .sty2) 保留在原处并为 .lead 设置动画

试试这个

.jumbotron 
  height: 100%;
  height: 100vh;
  align-items: center;
  display: flex;
  position: relative;


.sty 
  display: inline-block;
  position: relative;


.sty1 
  overflow: hidden;


.sty2 
  overflow: hidden;


.sty1 .lead 
  position: relative;
  animation: firanim 1.5s ease-in-out;


.sty2 .lead 
  position: relative;
  animation: secanim 1s ease-in-out;


@keyframes firanim 
  from 
    top: -50px;
  

  to 
    top: 0px;
  


@keyframes secanim 
  from 
    left: -55vw;
  

  to 
    left: 0px;

【讨论】：

【参考方案2】：

您的动画设置在.leads 容器上（.sty1 和 .sty2），所以它是移动的，您的 lead 也随之移动，要修复它，您可以将它们包裹在一个div，其类将隐藏其overflow，如下所示

我添加了animation-container并设置了overflow:hidden，查看更新后的html

.jumbotron 
  height: 100%;
  height: 100vh;
  align-items: center;
  display: flex;
  position: relative;


.sty 
  display: inline-block;
  position: relative;


.sty1 
  position: relative;
  animation: firanim 1.5s ease-in-out;
  overflow: hidden;


.sty2 
  position: relative;
  animation: secanim 1s ease-in-out;
  overflow: hidden;


.animation-container 
  overflow: hidden;


@keyframes firanim 
  from 
    top: -50px;
  
  to 
    top: 0px;
  


@keyframes secanim 
  from 
    left: -55vw;
  
  to 
    left: 0px;
  

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <!-- CSS -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
  <link rel="stylesheet" href="css/style.css" type="text/css">
  <!-- EndCSS -->

  <title>Anurag Srivastava - Portfolio</title>
</head>

<body>
  <nav class="navbar navbar-expand-sm navbar-dark bg-dark text-white sticky-top">
    <a class="navbar-brand" href="#">Under Development</a>
    <button class="navbar-toggler d-lg-none" type="button" data-toggle="collapse" data-target="#collapsibleNavId" aria-controls="collapsibleNavId" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
    <div class="collapse navbar-collapse justify-content-end" id="collapsibleNavId">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link" href="#">About</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Follow</a>
        </li>
      </ul>
    </div>
  </nav>



  <div class="jumbotron justify-content-center">
    <div class="text-monospace sty">
      <h1 class="display-3">welcome<span class="text-danger">!</span></h1>
      <div class="animation-container">
        <div class="sty1">
          <span class="lead">lorem ipsum lorem <span class="text-warning">LOREM IPSUM.</span></span>
        </div>
      </div>
      <div class="sty2">
        <span class="lead">lorem ipsum lorem ipsum lorem.</span>
      </div>
    </div>
  </div>



  <!-- JS -->
  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
  <!-- EndJS -->
</body>

</html>

【讨论】：

【参考方案3】：

试试下面的 HTML：

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <!-- CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
    <link rel="stylesheet" href="css/style.css" type="text/css">
  <!-- EndCSS -->

    <title>Anurag Srivastava - Portfolio</title>
  </head>
  <body>
    <nav class="navbar navbar-expand-sm navbar-dark bg-dark text-white sticky-top">
        <a class="navbar-brand" href="#">Under Development</a>
        <button class="navbar-toggler d-lg-none" type="button" data-toggle="collapse" data-target="#collapsibleNavId" aria-controls="collapsibleNavId"
            aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
        <div class="collapse navbar-collapse justify-content-end" id="collapsibleNavId">
          <ul class="navbar-nav">
            <li class="nav-item">
              <a class="nav-link" href="#">About</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Follow</a>
            </li>
          </ul>
        </div>
    </nav>


    
    <div class="jumbotron justify-content-center">
      <div class="text-monospace sty">
        <h1 class="display-3">welcome<span class="text-danger">!</span></h1>
        <div class="sty1">
        <span class="lead_1">lorem ipsum lorem <span class="text-warning">LOREM IPSUM.</span></span>
        </div>
        <div class="sty2">
        <span class="lead_2">lorem ipsum lorem ipsum lorem.</span>
        </div>
      </div>
    </div>



<!-- JS -->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
<!-- EndJS -->
  </body>
</html>

还有下面的 CSS

.jumbotron 
    height: 100%;
    height: 100vh;
    align-items: center;
    display: flex;
    position: relative;


.sty 
    display: inline-block;
    position: relative;


.sty1 
    overflow: hidden;

.lead_1
  animation: firanim 1.5s ease-in-out;
  position: relative;

.lead_2
  position: relative;
  animation: secanim 1s ease-in-out;

.sty2 
    overflow: hidden;


@keyframes firanim 
    from top:-50px;
    to top:0px;

@keyframes secanim 
    from left:-55vw;
    to left:0px;

希望对您有所帮助！ :)

【讨论】：

以上是关于如何更改文本动画以使它们仅显示在自己的空间中？的主要内容，如果未能解决你的问题，请参考以下文章

TextViews 在 Android 4 上仅动画一次

仅添加非空白更改

如何使Mac上的鼠标指针更大？

如何在完成前中断 UIView 动画？

如何刷新 Widget 数据？

如何在 SwiftUI 中动画/过渡文本值更改