javascript - 以特定 Angular 在对 Angular 线上滑动元素

Question

我的目标是无论设备的宽度或高度如何，都以特定 Angular 沿对 Angular 线从右向左滑动元素。目前我的代码只从右上角的特定位置到左下角的特定位置。我正在寻找的是只给它初始右上角值和 Angular ，它应该使用初始值加上 Angular 来计算左下角。这样，滑动效​​果的 Angular 将等于我的元素的 Angular ，无论视口(viewport)宽度或高度如何，它在任何设备上看起来都不错。

html

<a id="flymeby" href="#">Fly me by</a>

js

$( "#flymeby" ).click(function(e) {
$('body').append('<div class="flyby"></div>');
var left = $('.flyby').offset().left;
  e.preventDefault();
                $(".flyby").css({left:left}).animate({"left":"-500px", "top":"300px"}, 6600, "swing", function() {

                    $('.flyby').remove();
                });
});

CSS

body {
  overflow-x:hidden;
}
.flyby {
  width:500px;
  background:#000;
  width: 500px;
  height: 69px;
  position: absolute;
  top: 50px;
  right: -500px;
  -webkit-transform-origin: top right;
  -ms-transform-origin: top right;
  transform-origin: top right;
  -webkit-transform: skewY(-15deg);
  -ms-transform: skewY(-15deg);
  transform: skewY(-15deg);
}
#flymeby {
  background:red;
  color:#fff;
  display:inline-block;
  padding:10px 20px;
}

我目前的工作 http://jsfiddle.net/fbtv5kpz/4/

更新: 理想情况下，我希望幻灯片没有初始值，只是 Angular ，它应该自动在屏幕中间从右向左滑动。

Answer 1

您可以使用动画 和translate() 来实现

添加带有动画的类 onclick DOM a

Working fiddle

$("#flymeby").click(function(e) {
  $(".flyby").addClass('startFly');
});

body {
  overflow-x: hidden;
}

.flyby {
  width: 500px;
  background: #000;
  width: 500px;
  height: 69px;
  position: absolute;
  transform-origin: top right;
  transform: skewY(-15deg) translate(200%);
}

#flymeby {
  background: red;
  color: #fff;
  display: inline-block;
  padding: 10px 20px;
}

.startFly{
  animation: fly 6s linear;
}

@keyframes fly {
  100% {
 transform: skewY(-15deg) translate(-200%);
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a id="flymeby" href="#">Fly me by</a>
<div class="flyby"></div>

更新为您附加的图像

  var w=$(window).width();
  var h=$(window).height();
  var g=h+w;
  $(".flyby").css('transform','skewY(-15deg) translateX(' + g + 'px) translateY(' + 0 + 'px)' );

$("#flymeby").click(function(e) {
  $(".flyby").addClass('startFly');
});

body {
  overflow-x: hidden;
  height: 100%;
}

html { height: 100%; }


.flyby {
  background: #000;
  width: 100px;
  height: 69px;
  position: absolute;
  transform-origin: top right;
}

#flymeby {
  background: red;
  color: #fff;
  display: inline-block;
  padding: 10px 20px;
}

.startFly{
  animation: fly 6s linear;
}

@keyframes fly {
  100% {
 transform: skewY(-15deg) translateY(80vh) translateX(0);
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a id="flymeby" href="#">Fly me by</a>
<div class="flyby"></div>