jquery - 如何在跨度中向宽度添加过渡

Question

我正在使用 jquery Wordsrotator .一切正常，如果字宽增加/减少，我想为跨度添加过渡效果。

当前宽度突然变化。

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

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

演示页面 here

Answer 1

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

我选择了后者。这是一个 fiddle这样您就可以看到它的实际效果。

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

---

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

我在第一次填充 .wordsrotator_wordOut 之后添加了这一行，它所做的是将容器的宽度(称为 cont)设置为 .wordsrotator_wordOut 的数字宽度

---

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

这一行是在我们填充 .wordsrotator_wordIn 之后添加的，它使用 JQuery 的动画库来设置容器宽度的动画，容器宽度从离开的宽度变为进入的宽度。每次滴答出现时都会运行该行圆。

---

这是添加了这两行的最终结果。我建议也看看 fiddle ，因为我在那里做了一些其他的事情(只是一些 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));

希望对您有所帮助。