如何将过渡添加到跨度中的宽度

Question

我使用的是jquery Wordsrotator。一切都很好，如果单词宽度增加/减少，我想为跨度添加过渡效果。

目前宽度突然变化。

我添加了过渡，但它似乎不起作用

#myId
{
    transition: width 1s linear;
    -moz-transition: width 1s linear;
    -webkit-transition: width 1s linear;
    -o-transition: width 1s linear;
}

此处的演示页面

Answer 1

这可能不是您所期望的解决方案，这里的问题是宽度被设置为自动（因此并没有真正改变），这意味着我们必须做两件事中的一件A）每次更新宽度并希望它保持同步，B）更改Rotator插件，以便它为我们做这件事。

我选择了晚一点。这是一把小提琴，所以你可以看到它在演奏。

现在我要说我做了什么。如果你看下面，你会看到2行我添加了

---

cont.width(cont.find(".wordsrotator_wordOut").width());

我在.wordsrotator_wordOut第一次填充后添加了这一行，它所做的是将容器的宽度（调用cont）设置为.wordsrototor_wordOut的数字宽度

---

cont.animate({width: cont.find(".wordsrotator_wordIn").width()});

这一行是在我们填充.wordsrotator_wordIn之后放入的，它使用JQuery的动画库来动画容器宽度从输出的宽度变为输入的宽度。每次勾号出现时都会运行这一行。

---

这是添加了这两行的最终结果。我建议也看看小提琴，因为我在里面做了一些其他的东西（只是一些css flex的东西）。

/*
 * jQuery Words Rotator plugin
 *
 * Copyright (c) 2013 Andrea Pace
 * licensed under MIT license.
 *
 * https://github.com/andreapace/wordsrotator
 * http://andreapace.co.uk/wordsrotator
 *
 * Version: 0.9.0
 */
(function($) {
  $.fn.wordsrotator = function(options) {
    var defaults = {
      autoLoop: true,
      randomize: false,
      stopOnHover: false,
      changeOnClick: false,
      words: null,
      animationIn: "flipInY",
      animationOut: "flipOutY",
      speed: 2000
    };
    var settings = $.extend({}, defaults, options);
    var listItem
    var array_bak = [];
    return this.each(function() {
      var el = $(this)
      var cont = $("#" + el.attr("id"));
      var array = [];
      if ((settings.words) || (settings.words instanceof Array)) {
        array = $.extend(true, [], settings.words);
        if (settings.randomize) array_bak = $.extend(true, [], array);
        listItem = 0
        if (settings.randomize) listItem = Math.floor(Math.random() * array.length)
        cont.html(array[listItem]);
        var rotate = function() {
          cont.html("<span class='wordsrotator_wordOut'><span>" + array[listItem] + "</span></span>");
          cont.width(cont.find(".wordsrotator_wordOut").width());
          if (settings.randomize) {
            array.splice(listItem, 1);
            if (array.length == 0) array = $.extend(true, [], array_bak);
            listItem = Math.floor(Math.random() * array.length);
          } else {
            if (array.length == listItem + 1) listItem = -1;
            listItem++;
          }
          $("<span class='wordsrotator_wordIn'>" + array[listItem] + "</span>").appendTo(cont);
          cont.wrapInner("<span class='wordsrotator_words' />");
          cont.animate({width: cont.find(".wordsrotator_wordIn").width()});
          cont.find(".wordsrotator_wordOut").addClass("animated " + settings.animationOut);
          cont.find(".wordsrotator_wordIn").addClass("animated " + settings.animationIn);
        };
        cont.on("click", function() {
          if (settings.changeOnClick) {
            rotate();
            return false;
          };
        });
        if (settings.autoLoop) {
          var t = setInterval(rotate, settings.speed);
          if (settings.stopOnHover) {
            cont.hover(function() {
              window.clearInterval(t)
            }, function() {
              t = setInterval(rotate, settings.speed);
            });
          };
        }
      };
    });
  }
}(jQuery));

希望这会有所帮助。