Question

我怎样才能伸展＆＃34;一个元素（即，用关键帧动画增加其宽度）到其父容器之外的居中或固定位置，而没有元素＆＃34;跳转＆＃34;？

它应该是什么样子（没有父容器的工作示例）：

＆＃13;

$('.mytrigger').click(function(){
  $('.box').toggleClass('mybox');
})

＆＃13;

* { border: 1px solid blue !important; }

.row-height {
  margin-top: 20px;
  height: 300px;
}

@keyframes mykeyframe {
  50%, 100% {
    // position: fixed;
    width: 90vw;
    animation-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1);;
  }
  100% {
    height: 50vh;
  }
}


.mytrigger {
  width: 60px;
  height: 30px;
  background-color: yellow;
}

.box {
  width: 120px;
  height: 100px;
  background-color: pink;
  display: inline-block;
}

.mybox {animation: mykeyframe 3s ease forwards;}

＆＃13;

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
      <div class="row row-height">
         <div class="col-12 text-center">
           <div class="mytrigger">click me</div>
           <div class="box"></div>
         </div>
      </div>
  </body>
</html>

＆＃13;

但是，我正在处理的网站需要有多个容器，这些容器通过容器的左边界限制元素的宽度变化。

在下面的示例中，我将关键帧动画中元素的位置更改为＆＃34;固定＆＃34;，这允许我添加＆＃34;左：10px＆＃34; （基于屏幕边框，忽略父容器），但该解决方案的问题是位置改变＆＃34;跳转＆＃34;：

http://jsfiddle.net/0Lkj74rb/

＆＃13;

$('.mytrigger').click(function(){
  $('.box').toggleClass('mybox');
})

＆＃13;

* { border: 1px solid blue !important; }

.row-height {
  margin-top: 20px;
  height: 300px;
}

@keyframes mykeyframe {
  50%, 100% {
    position: fixed;
    left: 10px;
    width: calc(100% - 20px);
    animation-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1);;
  }
  100% {
    // width: 99vw;
    height: 50vh;
  }
}


.mytrigger {
  width: 60px;
  height: 30px;
  background-color: yellow;
}

.box {
  width: 120px;
  height: 100px;
  background-color: pink;
  display: inline-block;
}

.mybox {animation: mykeyframe 3s ease forwards;}

＆＃13;

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <div class="container">
      <div class="row row-height">
         <div class="col-4 text-center"></div>
         <div class="col-4 text-center">
           <div class="mytrigger">click me</div>
           <div class="box"></div>
         </div>
         <div class="col-4 text-center"></div>
        </div>
      </div>
  </body>
</html>

＆＃13;

提前感谢您的帮助。

CSS动画拉伸元素在父容器之外到固定位置

0 个答案: