从远角动画宽度/高度

Question

我有一个由 6 个块组成的网格。单击每个块时，块会展开并覆盖容纳块的容器。

第一个盒子（左上角）看起来不错，但是其他的盒子没有像块增长到容器宽度和高度的错觉，因为它从左上角开始。

理想情况下，盒子 2 和 5 应该从它们的中心展开，盒子 1、3、4 和 6 应该从它们的远角展开。这可能吗？如何实现？

我的created a JSFiddle 表明了我的问题。但是重现的代码在这里：

jQuery

$(".service-block").on("click", "a", function (e) {
    e.preventDefault();

    var block = $(this);
    var blockOffset = block.offset();
    var blockBackgroundColor = block.css("backgroundColor");

    var container = $(".service-grid");
    var containerOffset = container.offset();

    // Create the popup and append it to the container
    var popout = $("<div class='service-block-popup'>Test</div>");
    popout.css({
        "backgroundColor": blockBackgroundColor,
        "position": "absolute",
        "top": blockOffset.top,
        "left": blockOffset.left
    }).appendTo(container)

    // Now animate the properties
    .animate({
        "height": container.height() + "px",
        "width": container.width() + "px",
        "top": containerOffset.top,
        "left": containerOffset.left
    }, 1500, function() {
        //alert("done");
    })

    .on("click", function () {
        popout.remove();
    });

});

标记

<div class="service-grid">
    <div class="row">
        <div class="service-block">
            <a href="#" class="box1">
                <span class="title">Box 1</span>
            </a>
        </div>
        <div class="service-block">
            <a href="#" class="box2">
                <span class="title">Box 2</span>
            </a>
        </div>
        <div class="service-block">
            <a href="#" class="box3">
                <span class="title">Box 3</span>
            </a>
        </div>
    </div>
    <div class="row">
        <div class="service-block">
            <a href="#" class="box4">
                <span class="title">Box 4</span>
            </a>
        </div>
        <div class="service-block">
            <a href="#" class="box5">
                <span class="title">Box 5</span>
            </a>
        </div>
        <div class="service-block">
            <a href="#" class="box6">
                <span class="title">Box 6</span>
            </a>
        </div>
    </div>
</div>

CSS

*, *::after, *::before {
    box-sizing: border-box;
}

.service-grid { width: 600px; }
.row { 
    overflow: hidden; 
}

.service-grid .service-block a {
    display: block;
    height: 200px;
    width: 200px;
    text-align: center;
    float: left;
}
.service-grid .service-block a > img {
    display: block;
    margin: 0 auto;
    transition: all 100ms linear 0s;
}
.service-grid .service-block a > .title {
    display: block;
    font-family: Arial,Helvetica,sans-serif;
    font-size: 2.2rem;
    font-weight: bold;
    line-height: 3.2rem;
    margin-top: 20px;
    text-transform: uppercase;
}

.box1 { background: red; }
.box2 { background: purple; }
.box3 { background: yellow; }
.box4 { background: orange; }
.box5 { background: green; }
.box6 { background: magenta; }

Answer 1

我将自己回答我的问题。这是一个简单的错误！

我没有在.service-block-popup 上设置宽度/高度。所以它并没有从目前的状态扩展。应该是这样构造的：

// Create the popup and append it to the container
var popout = $("<div class='service-block-popup'>Test</div>");
popout.css({
    "backgroundColor": blockBackgroundColor,
    "position": "absolute",
    "top": blockOffset.top,
    "left": blockOffset.left,
    "width": block.outerWidth(),
    "height": block.outerHeight()
}).appendTo(container)
/* .... */

在这里行动：http://jsfiddle.net/hdq0x2s8/4/

Answer 2

我根据容器的宽度/高度和盒子的宽度/高度生成了动态顶部和左侧。根据容器和盒子的大小，决定盒子的位置，是在角落还是在中心，然后决定顶部和左侧。

这里是js代码：

$(".service-block").on("click", "a", function (e) {
  e.preventDefault();

  var block = $(this);
  var blockOffset = block.offset();
  var blockBackgroundColor = block.css("backgroundColor");

  var container = $(".service-grid");
  var containerOffset = container.offset();
  var top = 0;
  var left = 0;

  if (blockOffset.top - containerOffset.top == 0 &&  blockOffset.left - containerOffset.left == 0) {
      top = blockOffset.top;
      left = blockOffset.left;
  } else if (blockOffset.top - containerOffset.top == 0 && blockOffset.left - containerOffset.left + block.width() == container.width()) {
      top = blockOffset.top;
      left = container.width() - containerOffset.left;
  } else if (blockOffset.top - containerOffset.top + block.height() == container.height() && blockOffset.left - containerOffset.left == 0) {
      top = container.height() - containerOffset.top;
      left = containerOffset.left;
  } else if (blockOffset.top - containerOffset.top + block.height() == container.height() && blockOffset.left - containerOffset.left + block.width() == container.width()) {
      top = container.height() - containerOffset.top;
      left = container.width() - containerOffset.left;
  } else {
      top = blockOffset.top + (block.width() / 2);
      left = blockOffset.left + (block.height() / 2);
  }

  // Create the popup and append it to the container
  var popout = $("<div class='service-block-popup'>Test</div>");
  popout.css({
      "backgroundColor": blockBackgroundColor,
      "position": "absolute",
      "top": top,
      "left": left
  }).appendTo(container)

  // Now animate the properties
  .animate({
      "height": container.height() + "px",
      "width": container.width() + "px",
      "top": containerOffset.top,
      "left": containerOffset.left
  }, 1500, function() {
      //alert("done");
  })

  .on("click", function () {
      popout.remove();
  });

});

这里是fiddle。

它适用于 6 个以上的盒子。

Answer 3

希望这段代码对你有用，我只是添加了几行代码。找小提琴here

$(".service-block").on("click", "a", function (e) {
        e.preventDefault();

        var block = $(this);
        var blockOffset = block.offset();
        var blockBackgroundColor = block.css("backgroundColor");

        var container = $(".service-grid");
        var containerOffset = container.offset();

        // Create the popup and append it to the container
        var popout = $("<div class='service-block-popup'>Test</div>");
    
    	thisHeight = $(this).height();
        thisWidth = $(this).height();
    	var clsName = $(this).attr('class');
    
    	var topEle = ["box1", "box2", "box3"];
        if ($.inArray(clsName, topEle) > -1)
        {
            thisHeight = 0;
        }
    
    	var leftEle = ["box1", "box4"];
    	if ($.inArray(clsName, leftEle) > -1)
        {
            thisWidth = 0;
        }
        var midEle = ["box2", "box5"];
        if ($.inArray(clsName, midEle) > -1)
        {
            thisWidth = thisWidth/2;
        }
    
        popout.css({
            "backgroundColor": blockBackgroundColor,
            "position": "absolute",
            "top": blockOffset.top + thisHeight,
            "left": blockOffset.left + thisWidth
        }).appendTo(container)

        // Now animate the properties
        .animate({
            "height": container.height() + "px",
            "width": container.width() + "px",
            "top": containerOffset.top,
            "left": containerOffset.left
        }, 1500, function() {
            //alert("done");
        })

        .on("click", function () {
            popout.remove();
        });

    });

*, *::after, *::before {
    box-sizing: border-box;
}

.service-grid { width: 600px; }
.row { 
    overflow: hidden; 
}

.service-grid .service-block a {
    display: block;
    height: 200px;
    width: 200px;
    text-align: center;
    float: left;
}
.service-grid .service-block a > img {
    display: block;
    margin: 0 auto;
    transition: all 100ms linear 0s;
}
.service-grid .service-block a > .title {
    display: block;
    font-family: Arial,Helvetica,sans-serif;
    font-size: 2.2rem;
    font-weight: bold;
    line-height: 3.2rem;
    margin-top: 20px;
    text-transform: uppercase;
}

.box1 { background: red; }
.box2 { background: purple; }
.box3 { background: yellow; }
.box4 { background: orange; }
.box5 { background: green; }
.box6 { background: magenta; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="service-grid">
    <div class="row">
        <div class="service-block">
            <a href="#" class="box1">
                <span class="title">Box 1</span>
            </a>
        </div>
        <div class="service-block">
            <a href="#" class="box2">
                <span class="title">Box 2</span>
            </a>
        </div>
        <div class="service-block">
            <a href="#" class="box3">
                <span class="title">Box 3</span>
            </a>
        </div>
    </div>
    <div class="row">
        <div class="service-block">
            <a href="#" class="box4">
                <span class="title">Box 4</span>
            </a>
        </div>
        <div class="service-block">
            <a href="#" class="box5">
                <span class="title">Box 5</span>
            </a>
        </div>
        <div class="service-block">
            <a href="#" class="box6">
                <span class="title">Box 6</span>
            </a>
        </div>
    </div>
</div>

Answer 4

试试这个代码 我有一些改变 CSS & JS

$(".service-block").on("click", "a", function (e) {
        e.preventDefault();
        var block = $(this);
        var blockOffset = block.offset();
        var blockBackgroundColor = block.css("backgroundColor");

        var container = $(".service-grid");
        var containerOffset = container.offset();

        // Create the popup and append it to the container
        var popout = $("<div class='service-block-popup'>Test</div>");
        popout.css({

            "backgroundColor": blockBackgroundColor,
            "position": "absolute",
            "left": "50%",
            "top": "50%",
        }).appendTo(container)

        // Now animate the properties
        .animate({
            "height": container.height() + "px",
            "width": container.width() + "px",
            "top": containerOffset.top,
            "left": containerOffset.left
        }, 1500, function () {
            //alert("done");
        })

        .on("click", function () {
            popout.remove();
        });

    });

演示链接http://jsfiddle.net/hdq0x2s8/3/

Answer 5

了解类不是您的偏好，但就内存和动画平滑度而言，它们是最有效的方法。

需要在基类 (.message) 上应用 starting value(s) (Eg. width/height/etc.)、animation-settings 和 scale(0)。

HTML

<div class="trigger">trigger</div>
<div class="message">XXXXXXXXXhXXXXXX</div>

CSS

.message{
  background-color: blue;
  transform: scale(0);
  transform-origin: top left;
  height: 100px;
  transition: width 2s, height 2s, transform 2s;
}
        
.unreadMessage{   
  transform: scale(1);
}

jQuery

var msg = $('.message'),
    trigger = $('.trigger')

trigger.on('click',function(){
    msg.toggleClass('unreadMessage')
})

Codepen 示例：https://codepen.io/gavAusMac/pen/zYKgWJN

奖励信息： - 另外，如果applying dynamic style changes (eg. width/height) via Javascript，可能需要结合使用requestAnimationFrame() 和setTimeout()，以确保动态高度/等。在设置动画类之前应用。

代码示例：

$(msg).css('width', dynamicWidth + 'px')
$(msg).css('height', dynamicHeight + 'px')
        
requestAnimationFrame(function() {
  setTimeout(function() {
    $(msg).toggleClass('unreadMessage')
  });
});