Нажмите на изображение, чтобы скользить внутрь и наружу?

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,5 с (500 мс).

P.S. Я использовал transform вместо того, чтобы играть с right, left или любым другим подобным свойством, поскольку translate3d с аппаратным ускорением (если я правильно помню), и это преимущество очень помогло бы в спектакль. С другой стороны, вам придется оставить кнопку открытой, чтобы можно было снова сдвинуть купонный элемент после его скрытия.

Кроме того, вот рабочий пример :)

Answer 2

увеличение и уменьшение ширины div при клике. это даст вам эффект слайда. спасибо