Question

当我单击底部优惠券类别时，图片从右向左缓慢隐藏，优惠券层从左向右滑出。单击closeCoupon时，优惠券层从右到左隐藏，底部优惠券滑出。当前我只是实现显示和隐藏工具，没有滑动效果，我想实现滑动效果，怎么办？

.bottom-coupon{
  background: url('../images/public/bottom-coupon.png') no-repeat bottom;
  position: fixed;
  bottom: 1%;
  z-index: 12;
  text-align: center;
  cursor: pointer;
}
.coupon-layer{
  background-color:#263646;background-color: rgba(0,0,0,0.5);height: 175px;width: 100%; position: fixed;bottom: 0%; z-index: 12;
  .coupon-layer-pic{
    width: 980px;height:178px;margin: auto;position: relative;
    .coupon-combo{
      position: absolute;
      top: 15%;
      left: 0;
    }
    bottom-coupon-pic{
      transition: all linear 0.5s;
      height:294px;
      width: 121px;
    }
    .ng-hide {
      width: 0;
    }
    .coupon-close{
      background: url('../svg/close-gray.svg') no-repeat bottom;
      position: absolute;
      top: 10px;
      right: 0px;
      cursor: pointer;
    }
  }
}

   .controller("footLayerCtrl",["$scope","$rootScope","$filter","factoryGlobal","mTranslate", function($scope,$rootScope,$filter,factoryGlobal,mTranslate) {
        $scope.isShowCoupon=true;
        $scope.isShowLayer=false;
        $scope.showCoupon=function () {
            $scope.isShowCoupon=false;
            $scope.isShowLayer=true;
        }
        $scope.closeCoupon=function () {
            $scope.isShowCoupon=true;
            $scope.isShowLayer=false;
        }
    }])

Answer 1

您想要这样的东西吗？

window.onload = ()=>{
  // grab our "button" element that we'll use to hide the coupon
  const btn = document.getElementById('coupon-btn');
  // the coupon div
  const coupon = document.getElementById('special-coupon');
  // attach a click event to our button element
  btn.addEventListener('click', ()=>{
    // if the class is in the element's classList then remove it. Otherwise, add it.
    coupon.classList.toggle('shown');
  });
};

*{
  padding: 0;
  margin: 0;
}

.flex-container {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.coupon {
  width: 600px;
  height: 200px;
  background-color: #E51D46;
  border-top-right-radius: 100px 50%;
  border-bottom-right-radius: 100px 50%;
  padding: 10px;
  transform: translate3d(-550px, 0, 0);
  transition: transform 0.5s ease-in-out;
}

.coupon > .btn {
  transform: rotate(45deg);
}

.btn {
  border: none !important;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  text-align: center;
  background-color: goldenrod;
  color: white;
  font-weight: bold;
  transition: transform 0.5s ease-in-out;  
}

.shown {
  transform: translate3d(0, 0, 0);
}

.shown > .btn {
  transform: rotate(0deg);
}

<div class="flex-container coupon shown" id="special-coupon">
  <img src="https://www.freeiconspng.com/uploads/cancel-close-button-png-9.png" class="btn" id="coupon-btn" />
</div>

您可以通过更改transition的持续时间来控制其速度，该持续时间当前设置为0.5s（500毫秒）。

P.S。我使用transform而不是使用right，left或任何类似的属性，因为translate3d是硬件加速的（如果我没记错的话），这种优势将有助于表现很多。另一方面，您必须使按钮保持暴露状态，以便您可以在优惠券div隐藏后再次滑出。

另外，这是working example：）

Answer 2

增加和减少点击时div的宽度。这将使您滑入滑出效果。谢谢

单击图像以滑入和滑出？

2 个答案: