css - 如何使用 CSS 创建图像的副本、移动和缩放

Question

我有一个 AngularJS 应用程序，我有一个带有“添加到购物车”按钮的图像。我想要发生的是，当有购物车图标时，图像被复制并移动(并缩小)到页面顶部。有谁知道我可以在哪里找到解决方案？

我当前的 CSS 只工作了一半。它将图像移动到图像的 div 的左上角并使图像变小。我希望它做的是将图像带到位于页面顶部的购物车 div。

.slideOutUp:hover {
  -webkit-animation-name: slideOutUp;
  animation-name: slideOutUp;
  -webkit-animation-duration: .5s;
  animation-duration: .5s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  }
  @-webkit-keyframes slideOutUp {
  0% {
  -webkit-transform: translateY(0);
  transform: translateY(0);
  }
  100% {
  visibility: hidden;
  -webkit-transform: scale3d(.3, .3, .3);
  transform: scale3d(.3, .3, .3);
  transform-origin: left top;   
  }
  }
  @keyframes slideOutUp {
  0% {
  -webkit-transform: translateY(0);
  transform: translateY(0);
  }
  100% {
  visibility: hidden;
  -webkit-transform: scale3d(.3, .3, .3);
  transform: scale3d(.3, .3, .3);
  transform-origin: left top;
  }
  } 

Answer 1

不完美，但在这里..

http://codepen.io/poldiwa/pen/yJadjN

$cart = $('.cart');
/* get details about the cart div */
var t = $cart.offset().top;
var l = $cart.offset().left;
var w = parseInt($cart.css('width').replace('px',''));
var h = parseInt($cart.css('height').replace('px',''));
var vCenter = (t+h)/2; // vertical center of cart div
var hCenter = (l+w)/2; // horizontal center of cart div
$('a').on('click',function(e){
  e.preventDefault();
  $orig = $(this).siblings('img');
  $clone = $orig.clone();
  //make our duplicate for animation
  /* put our clone in the same position */
  $clone.css('position','fixed');
  $clone.css('top',$orig.offset().top);
  $clone.css('left',$orig.offset().left);
  
  $('body').append($clone);
  // add to the dom so we can see it.
  // then animate
  $.when($clone.animate({
    top: vCenter,
    left: hCenter,
    width: '25px',
    opacity: 0.2
  })).done(function(){
    // when the animation is done,
    // we remove it from the DOM
    $(this).remove();
  });
});

*{
  box-sizing: border-box;
}
html,body{
  color: #333;
}
.cart{
  border: 1px solid #ddd;
  margin: 1em 0;
  padding: 1em;
  width: 10%;
  text-align: center;
}
.row{
  display: flex;
  justify-content: space-around;
}
.col{
  position: relative;
}
.col a{
  position: absolute;
  text-align: center;
  bottom: 0;
  background: #ddd;
  padding: 1em;
  width: 100%;
  color: inherit;
  text-decoration: none;
  /* z-index to prevent the clone covering the button */
  z-index: 1;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="cart"><i class="fa fa-shopping-cart"></i></div>
<div class="row">
  <div class="col">
    <img src="http://placehold.it/250/000000/ffffff" alt="" />
    <a href="#"><i class="fa fa-cart-plus"></i> Add to Cart</a>
  </div>
  <div class="col">
    <img src="http://placehold.it/250/000000/ffffff" alt="" />
    <a href="#"><i class="fa fa-cart-plus"></i> Add to Cart</a>
  </div>
  <div class="col">
    <img src="http://placehold.it/250/000000/ffffff" alt="" />
    <a href="#"><i class="fa fa-cart-plus"></i> Add to Cart</a>
  </div>
</div>