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的动画库来设置容器宽度的动画，该宽度从进出宽度的宽度变化。每次勾选时都会运行此行轮。

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

希望这有帮助。

如何在span中添加Transition到width

1 个答案: