Question

我有3个按钮位于容器中心。当用户单击其中一个按钮时，该按钮应该转到容器的左上角。其他按钮应该消失。

我成功了但是我不能让按钮从原始位置开始动画，这是因为我在开始动画之前将按钮位置更改为绝对位置。

我认为正确的方法是从开始时给按钮绝对位置，但我不知道是否可能（页面应该响应）。

这是我的HTML：

<body>
    <div id="inner_body" style="position:relative;margin: auto;text-align: center;width:50%;margin-top: 200px">
        <button class="bc" id="0" style="margin-top: 400px;margin-left:20px;margin-right:20px;padding: 20px;background-color: #718bf3">Botton A</button>
        <button class="bc" id="1" style="margin-top: 400px;margin-left:20px;margin-right:20px;padding: 20px;background-color: #718bf3">Botton B</button>
        <button class="bc" id="2" style="margin-top: 400px;margin-left:20px;margin-right:20px;padding: 20px;background-color: #718bf3">Botton C</button>
    </div>
</body>

和Jquery脚本：

$(document).on('click', '.bc', function() {
    $('#' + this.id + '').css({
        position: 'absolute'
    }).animate({
        left: 0,
        marginTop: 0
    }, "slow");
    for (var i = 0; i < 3; i = i + 1) {
        if (i != this.id) {
            $('#' + i + '').delay(1200).fadeOut(300);
        }
    }
});

Answer 1

使用'position'获取元素的初始位置，并在开始动画之前重新使用它。

var x=$(this).position().left;
var y=$(this).position().top;
$(this).css({'position': 'absolute','top': y+'px','left': x+'px'})

Answer 2

我刚刚更新了处理body { padding: 0; margin: 0 } .wrapper { display: flex; } nav { flex: 1 1 150px; background: gray; height: 100vh; } .nav-wrapper { width: 100%; display: flex; flex-direction: column; } .nav-wrapper a { flex: 1 1; border: 1px solid red; } section { flex: 5 1 500px; padding: 20px; position: relative; overflow-y: auto; } .inner { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }的自动高度（ jsfiddle也更新了）

<强> HTML

<div class="wrapper">
  <nav role="navigation">
    <div class="nav-wrapper">
      <a href="#">Home</a> 
      <a href="#">About</a> 
    </div>
  </nav>
  <section>
    <div class="inner">
      <p>Lorem</p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae molestiae, libero inventore nobis et veritatis, laborum vitae, vel eaque omnis ad adipisci quia velit blanditiis qui. Cum voluptas quisquam itaque possimus accusamus repellendus quia iure
      asperiores. Unde, rerum nihil maiores nisi, iusto voluptate id cumque incidunt, perspiciatis facilis perferendis explicabo.       
      <p>Lorem</p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae molestiae, libero inventore nobis et veritatis, laborum vitae, vel eaque omnis ad adipisci quia velit blanditiis qui. Cum voluptas quisquam itaque possimus accusamus repellendus quia iure
      asperiores. Unde, rerum nihil maiores nisi, iusto voluptate id cumque incidunt, perspiciatis facilis perferendis explicabo.       
      <p>Lorem</p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae molestiae, libero inventore nobis et veritatis, laborum vitae, vel eaque omnis ad adipisci quia velit blanditiis qui. Cum voluptas quisquam itaque possimus accusamus repellendus quia iure
      asperiores. Unde, rerum nihil maiores nisi, iusto voluptate id cumque incidunt, perspiciatis facilis perferendis explicabo.       
    </div>
  </section>
</div>

<强> CSS

#inner_body

<强> JS

<div id="inner_body">
    <button>Botton A</button>
    <button>Botton B</button>
    <button>Botton C</button>
</div>

jsfiddle

Answer 3

以下是我对css transition属性的尝试 https://jsfiddle.net/abkow4zt/1/

＆＃13;

$(document).on('click', '.bc', function () {
		
		$(this).css({'top': $(this).position().top + 'px','left': $(this).position().left + 'px'}); // set origin position
  	$(this).addClass('onclick'); // add class with transition to clicked button
	
    setTimeout(function() {
      $('button.bc').each(function() {
        if(!$(this).hasClass('onclick')) $(this).fadeOut(300); // smoth hide other buttons
      }, 1200); // after 1200ms deylay
    });

});

＆＃13;

#inner_body {
  position:relative;
  margin: auto;
  text-align: center;
  margin-top: 50px
  border: 1px solid grey;
}

button {
  margin-top: 400px;
  margin-left:20px;
  margin-right:20px;
  padding: 20px;
  background-color: #718bf3;
  transition: transform 1s, -webkit-transform 1s, -ms-transform 1s;
}

.onclick {
    position: absolute;
    -ms-transform: translate(-20px, -400px);
    -webkit-transform: translate(-20px, -400px);
    transform: translate(-20px, -400px);
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="inner_body">
  <button class="bc" id="0">Botton A</button>
  <button class="bc" id="1">Botton B</button>
  <button class="bc" id="2">Botton C</button>
</div>

＆＃13;

用jquery从中心向左动画

3 个答案: