在网格元素上切换动画并淡入/淡出其他元素答案

【问题标题】：Toggle an animation over an element of a grid and fadein/out the other elements在网格元素上切换动画并淡入/淡出其他元素
【发布时间】：2016-07-05 01:32:18
【问题描述】：

我正在为我的网站尝试一种类似平铺的布局，用户可以与之交互。每个框是一个用于选择产品的按钮，在选择产品时，其他框淡出并隐藏。此效果是可切换的。

我对网上找到的以下fiddle稍作修改，非常接近预期的结果。

$('.box').click(function() {
  $('.box').not(this).fadeToggle(250);
});

div.box {
  width: 100px;
  height: 63px;
  background-color: #52c6ec;
  margin: 5px;
  padding-top: 37px;
  float: left;
  text-align: center;
  color: #fff;
  font-weight: bold;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="box" id="box1">Box 1</div>
<div class="box" id="box2">Box 2</div>
<div class="box" id="box3">Box 3</div>
<div class="box" id="box4">Box 4</div>
<div class="box" id="box5">Box 5</div>
<div class="box" id="box6">Box 6</div>
<div class="box" id="box7">Box 7</div>
<div class="box" id="box8">Box 8</div>
<div class="box" id="box9">Box 9</div>
<div class="box" id="box10">Box 10</div>
<div class="box" id="box11">Box 11</div>
<div class="box" id="box12">Box 12</div>
<div class="box" id="box13">Box 13</div>
<div class="box" id="box14">Box 14</div>
<div class="box" id="box15">Box 15</div>
<div class="box" id="box16">Box 16</div>
<div class="box" id="box17">Box 17</div>
<div class="box" id="box18">Box 18</div>
<div class="box" id="box19">Box 19</div>
<div class="box" id="box20">Box 20</div>

我唯一想做的就是让选定的项目过渡（通过动画）到左上角，而不是仅仅出现在那里。最好也是在其他盒子褪色的过程中。

因为我在这里使用浮点数，所以我不知道如何为它们设置动画，因为它们没有任何数字属性。

关于 jQuery 解决方案的想法？谢谢。

【问题讨论】：

float 不能动画或过渡。你可能需要重新考虑。几乎所有的调整定位都是由...erm完成的，定位一切并通过JS调整所有的定位。
您需要在左上角添加一个动画吗？还是相反的运动？
@fcalderan 我需要一个元素来在选择的左上角设置动画，但是当它被取消选择时是反向动画。
不知道为什么有人将此标记为询问题外资源的问题。 jQuery 显然是热门话题。
不确定，但 “关于 jQuery 解决方案的想法？” 听起来 就像一个插件的请求......这是题外话.如果这不是它是什么那么它分解成一个同样离题的give me teh codez问题。至少这是我的解释。

标签： javascript jquery html css animation

【解决方案1】：

这是你想要的吗？

var t, l, loctop, locleft;

$('.box').click(function() {
  
  var e = $(this);
  
  if( $('.box').not(this).is(':visible') )
  {
    t = e.position().top + 'px';
    l = e.position().left + 'px';
    loctop = locleft = 0;
    $(this).css( {position: 'fixed', top:t, left:l} );
    $('.box').not(this).fadeToggle(550, function(){
      $(e).animate({ 
          top: loctop,
          left: locleft
        }, 800, function(){
        $(this).stop(true, true);
      });
    });
  }
  else
  {
    loctop = parseInt(t);
    locleft = parseInt(l);
    $(e).animate({ 
          top: loctop,
          left: locleft
        }, 800, function(){
      $('.box').not(this).fadeIn(550, function(){
        $(e).css( {position: 'relative', top:'', left:''} );
      });
    });
  }
  
});

div.box {
  width: 100px;
  height: 63px;
  background-color: #52c6ec;
  margin: 5px;
  padding-top: 37px;
  float: left;
  text-align: center;
  color: #fff;
  font-weight: bold;
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="box" id="box1">Box 1</div>
<div class="box" id="box2">Box 2</div>
<div class="box" id="box3">Box 3</div>
<div class="box" id="box4">Box 4</div>
<div class="box" id="box5">Box 5</div>
<div class="box" id="box6">Box 6</div>
<div class="box" id="box7">Box 7</div>
<div class="box" id="box8">Box 8</div>
<div class="box" id="box9">Box 9</div>
<div class="box" id="box10">Box 10</div>
<div class="box" id="box11">Box 11</div>
<div class="box" id="box12">Box 12</div>
<div class="box" id="box13">Box 13</div>
<div class="box" id="box14">Box 14</div>
<div class="box" id="box15">Box 15</div>
<div class="box" id="box16">Box 16</div>
<div class="box" id="box17">Box 17</div>
<div class="box" id="box18">Box 18</div>
<div class="box" id="box19">Box 19</div>
<div class="box" id="box20">Box 20</div>

【讨论】：

这里唯一的问题（我喜欢你目前所拥有的）是它不会动画回到旧位置。
非常接近！正如 Paulie_D 所说，我也希望它能够动画回来。
@Paulie_D 和 Chris，请检查新的更新。现在可以回到原来的位置了。
不错！我还在研究您的第一个答案的变体。类似的行为，但我的也在所选元素后面插入了一个虚拟元素，以便 2 个项目永远不会重叠。检查jsfiddle.net/wefts276/3。你知道为什么取消选择会有延迟吗？我想不通。
我添加了jQuery的stop()函数来停止动画。因为我注意到它使用box 类为所有元素设置动画。这是我添加的确切行。 $(this).stop(true, true);。看看，我修改了你的jsFiddle一点。

【解决方案2】：

这是我在 vanilla JS 中的尝试（在 Chrome 和 Firefox 上测试）
基本上，它仅适用于选定元素的 transform 属性和所有其他元素的 opacity 属性上的 CSS 过渡。当所选元素按照您的指定移动时，fadeOut/In 运行。

CodePen Demo

CSS

main {
  display: flex;
  flex-wrap: wrap;
  border: 1px solid #ccc;
}

div {
   background: #a0c6df;
   width: 100px;
   height: 100px;
   border: 2px #8fa0c6 dashed;
   margin: 10px;
   opacity: 1;
   cursor: pointer;
   transition: all 1s;
}

main.fadeout div:not(.current) {
   opacity: 0;
   cursor: default;
}

var main = document.querySelector('main');
var boxes = document.querySelectorAll('main div');
var animationIsRunning = false;

var getBoxPosition = function() {
  [].forEach.call(boxes, function(b) {
     var gBCR = b.getBoundingClientRect();
     b.dataset.top = gBCR.top;
     b.dataset.left = gBCR.left;
  }); 
}

window.addEventListener('resize', function() {
    var dc;
    getBoxPosition();
    if (dc = main.querySelector('div.current')) {
       main.classList.remove('fadeout');
       dc.classList.remove('current');
       dc.style.transform = 'translate(0,0)';
    }
});

main.addEventListener('click', function(evt) {
   var b    = evt.target,
       left = 0, 
       top  = 0;

   /* listen to the div click event only */
   if (b.nodeName.toLowerCase() !== 'div') { return false; }

   /* don't listen if there's a current element and user clicked 
      over a hidden div */
   if (
       main.querySelector('.current') &&
       !b.classList.contains('current')
   ) { return false; }

   /* only if another animation is not running... */
   if (!animationIsRunning) {
       animationIsRunning = true;

       b.classList.toggle('current');
       main.classList.toggle('fadeout');

       if (b.classList.contains('current')) {
          left = b.dataset.left;
          top  = b.dataset.top;
       }

       b.style.transform = 'translate(-'+ left +'px, -'+ top +'px)';
   }
});

main.addEventListener('transitionend', function() {
  animationIsRunning = false;
});


getBoxPosition();

【讨论】：

不错！在每个动画期间如何添加淡入淡出（淡入或淡出）？
它似乎并没有回到原来的位置。 :/ Vanilla JS 是一大优势。如果你能在香草jsfiddle.net/wefts276/3 中做到这一点，那就太棒了！这是一个具有所需行为的更新（除了取消选择点击的一些奇怪延迟）
真的！？对我来说很好。你怎么了？
我在编写该示例时使用了 Chrome。对我来说，当您第二次单击它时，您的 codepen 没有返回所选项目。

【解决方案3】：

看看 David Desandro 的这个很棒的插件 (http://isotope.metafizzy.co/)

您可以在此处找到关于 codepen 的示例：

http://codepen.io/desandro/pen/nFrte

同位素博客的一个例子：

// external js: isotope.pkgd.js

var $notifElem;

$( document ).ready( function() {

  var $grid = $('.grid').isotope({
    itemSelector: '.grid-item',
    masonry: {
      columnWidth: 100
    }
  });

  $grid.on( 'layoutComplete', function( event, laidOutItems ) {
    console.log( 'layoutComplete with ' + laidOutItems.length + ' items' );
  });

  $grid.on( 'click', '.grid-item', function() {
    // change size of item by toggling gigante class
    $( this ).toggleClass('grid-item--gigante');
    $grid.isotope('layout');
  });

});

* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

body {
  font-family: sans-serif;
}


/* ---- grid ---- */

.grid {
  background: #DDD;
  max-width: 1200px;
}

/* clear fix */
.grid:after {
  content: '';
  display: block;
  clear: both;
}

/* ---- .grid-item ---- */

.grid-item {
  float: left;
  width: 100px;
  height: 100px;
  background: #0D8;
  border: 2px solid #333;
  border-color: hsla(0, 0%, 0%, 0.7);
}

.grid-item--width2 { width: 200px; }
.grid-item--height2 { height: 200px; }

.grid-item:hover {
  background: #8CF;
  cursor: pointer;
}

.grid-item--gigante {
  width: 200px;
  height: 300px;
  background: #F80;
}

.notification {
  position: fixed;
  background: black;
  opacity: 0;
  color: white;
  font-size: 16px;
  padding: 0.5em;
  right: 0;
  top: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.isotope/2.2.2/isotope.pkgd.js"></script>
<h1>Isotope - layoutComplete</h1>

<p>Open Developer Console to view event logs.</p>

<p>Click item to toggle size</p>

<div class="grid">
  <div class="grid-item grid-item--width2"></div>
  <div class="grid-item grid-item--height2"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item grid-item--width2 grid-item--height2"></div>
  <div class="grid-item grid-item--width2"></div>
  <div class="grid-item grid-item--width2"></div>
  <div class="grid-item grid-item--height2"></div>
  <div class="grid-item"></div>
  <div class="grid-item grid-item--width2"></div>
  <div class="grid-item grid-item--height2"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item grid-item--width2"></div>
  <div class="grid-item grid-item--height2"></div>
  <div class="grid-item"></div>
  <div class="grid-item grid-item--width2"></div>
  <div class="grid-item grid-item--height2"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
</div>

<div class="notification"></div>

【讨论】：

虽然这确实是一个很棒的插件，但我现在只是在寻找一个纯粹的 jQuery 解决方案。如果不存在这样的解决方案，我可能不得不求助于您建议的方法。但目前它不在桌面上。还是谢谢。
@chris 看看插件代码，提取你需要的东西

【解决方案4】：

希望这对您非常有用。我已经创建了完整的工作代码你可以用这个。

var a=0;
$('.box').click(function() {
  if(a==0){
  var position = $(this).position();
$( "this" ).text( "left: " + position.left + ", top: " + position.top );
  $(this).css({
    "position":"absolute",
    "left":position.left,
    "top":position.top
    
  })
  $('.box').not(this).fadeOut(250);
  $(this).animate({
  "left":"0px",
    "top":"0px"
  }, 1000);
    a=1;
    }
  else{
    $('.box').not(this).fadeIn(250);
    $(this).css({"position":"static"});
    a=0;
  
  }
  
});

div.box {
  width: 100px;
  height: 63px;
  background-color: #52c6ec;
  margin: 5px;
  padding-top: 37px;
  float: left;
  text-align: center;
  color: #fff;
  font-weight: bold;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="box" id="box1">Box 1</div>
<div class="box" id="box2">Box 2</div>
<div class="box" id="box3">Box 3</div>
<div class="box" id="box4">Box 4</div>
<div class="box" id="box5">Box 5</div>
<div class="box" id="box6">Box 6</div>
<div class="box" id="box7">Box 7</div>
<div class="box" id="box8">Box 8</div>
<div class="box" id="box9">Box 9</div>
<div class="box" id="box10">Box 10</div>
<div class="box" id="box11">Box 11</div>
<div class="box" id="box12">Box 12</div>
<div class="box" id="box13">Box 13</div>
<div class="box" id="box14">Box 14</div>
<div class="box" id="box15">Box 15</div>
<div class="box" id="box16">Box 16</div>
<div class="box" id="box17">Box 17</div>
<div class="box" id="box18">Box 18</div>
<div class="box" id="box19">Box 19</div>
<div class="box" id="box20">Box 20</div>

【讨论】：

关闭，但它不会动画返回到原始位置。