CSS:如何在文本更改时添加平稳的移动到div宽度

如果有人可以比我更好地表达这个问题，请建议，我会更改（或编辑自己）。

这是我当前的jsfiddle：https：//jsfiddle.net/5v7mzadu/

我的html：

<div class="text-cycler">
    WE <div class="c-text" id="ctext-1">CARE</div>
       <div class="c-text" id="ctext-2">THINK</div>
       <div class="c-text" id="ctext-3">SEE</div>
       <div class="c-text" id="ctext-1">KNOW</div>
</div>

我的CSS：

.text-cycler {
     text-align:center;
     font-size:25px;
}
.c-text {
    display:inline-block
}

我的JavaScript：

var divs = $('div[id^="ctext-"]').hide(),
           i = 0;
(function cycle() { 
    divs.eq(i).fadeIn(400)
        .delay(1000)
        .fadeOut(400, cycle);
    i = ++i % divs.length;
})();

您可以看到第二个单词逐渐消失。我想向DIV添加平稳的过渡，以使Div容器的宽度不会突然更改宽度大小。（以便宽度" snap"更平滑）

任何人可以帮忙吗？

我相信您需要有关内容和文本对齐中心的动画。确实，这必须解决您的目的。

我添加了 span{white-space: nowrap; vertical-align: text-top;}以强迫它在单行中对齐，并添加了jQuery动画方法来动画旋转文本的宽度

这是您在

上玩的小提琴

var divs = $('div[id^="ctext-"]').hide(),
  i = 0;
(function cycle() {
  divs.eq(i)
    .animate(400, function() {
      $('.x').animate({
        width: $(this).innerWidth()
      });
    })
    .fadeIn(400)
    .delay(1000)
    .fadeOut(400, cycle);
  i = ++i % divs.length;
})();

.text-cycler {
  text-align: center;
  font-size: 25px;
}
span {
  white-space: nowrap;
  vertical-align: text-top;
}
.c-text {
  display: inline-block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="text-cycler">
  <span> WE </span>
  <span class="x">
    <div class="c-text" id="ctext-1">CARE</div>
    <div class="c-text" id="ctext-2">THINK</div>
    <div class="c-text" id="ctext-3">SEE</div>
    <div class="c-text" id="ctext-1">KNOW</div>
  </span>
</div>

请参阅此片段

var divs = $('div[id^="ctext-"]').hide(),
    i = 0;
(function cycle() { 
  divs.eq(i).fadeIn(400)
    .delay(1000)
    .fadeOut(400, cycle);
  i = ++i % divs.length;
})();

.text-cycler {
  font-size:25px;
  position:fixed; /*added*/
  padding-left:40% /*added*/
}
.c-text {
  display:inline-block
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="text-cycler" align="center">
WE <div class="c-text" id="ctext-1">CARE</div><div class="c-text" id="ctext-2">THINK</div><div class="c-text" id="ctext-3">SEE</div><div class="c-text" id="ctext-1">KNOW</div>
</div>

态

如果您想变得时髦。（不认真地，这比可用的更时髦的解决方案）

.text-cycler {
  width:75%;
  margin:auto;
  user-select: none;
  text-align:center;
  font-size:5vw;
}
.text-cycler:after {
  content:"";
  display:inline-block;
  animation: change;
  animation-duration: 10s;
  animation-iteration-count: infinite;
}
@keyframes change {
  0% {
    content: "CARE";
    opacity: 0;
  }
  3% {
    opacity: 1;
  }
  22% {
    opacity: 1;
  }
  25% {
    content: "CARE";
    opacity: 0;
  }
  25.1% {
    content: "THINK";
  }
  28% {
    opacity: 1;
  }
  47% {
    opacity: 1;
  }
  50% {
    content: "THINK";
    opacity: 0;
  }
  50.1% {
    content: "SEE";
  }
  53% {
    opacity: 1;
  }
  72% {
    opacity: 1;
  }
  75% {
    content: "SEE";
    opacity: 0;
  }
  75.1% {
    content: "KNOW";
  }
  78% {
    opacity: 1;
  }
  97% {
    opacity: 1;
  }
  100% {
    content: "KNOW";
    opacity: 0;
  }
}

<div class="text-cycler">
  WE
</div>

相关内容

最新更新

热门标签：