Как сделать плавную анимацию c выезжающим блоком?

#javascript #jquery

Пытался реализовать анимацию появления блока с правой стороны, получилось почти то
что я хотел. Но есть две проблемы.

Во первых анимация срабатывает только при 2 отображении элемента, во вторых анимация
не срабатывает на скрытие элемента. Как это все исправить?



$(document).on("click", ".project__discr--active", function () {
//  $(' .modal-dark').removeClass('js-module-hide').show(600, 'swing');
  module();
});



$(document).on("click", ".js-close-modal", function () {
//  $(' .modal-dark').addClass('js-module-hide').hide(600, 'swing');
  module();
});

var box = $('.modal-dark, .modal');
 function module () {
   if (box.hasClass('js-module-hide')) {
    box.removeClass('js-module-hide');
    setTimeout(function () {
      box.removeClass('visuallyhidden');
    }, 20);
  } else {
    box.addClass('visuallyhidden');
    box.one('transitionend', function(e) {
      box.addClass('js-module-hide');
    });
  }
};
body {
  overflow: hidden;
}
.project__discr--active {
  display: inline-block;
  background: rgba(0, 2, 45, 0.4);
  cursor: pointer;
}
.visuallyhidden {
  -webkit-transform: translate3d(100%, 0, 0);
  -ms-transform: translate3d(100%, 0, 0);
  transform: translate3d(100%, 0, 0);
  opacity: 1;
}
.js-module-hide {
  display: none;
  opacity: 0;
}
.modal-dark {
  background: rgba(0, 0, 0, 0.8);
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 9;
}
.modal.js-module-hide {
  -webkit-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}
.visuallyhidden {
  -webkit-transform: translate3d(100%, 0, 0);
  -ms-transform: translate3d(100%, 0, 0);
  transform: translate3d(100%, 0, 0);
  opacity: 1;
}
.modal {
  height: 600px;
  background: #fff;
  position: absolute;
  top: 0;
  margin-top: 120px;
  padding: 20px 0;
  left: 0;
  width: 100%;
  z-index: 10;
  -webkit-transition: -webkit-transform 0.3s ease-out;
  transition: transform 0.3s ease-out;
  will-change: top;
}
.base {
  width: 100%;
  margin: 0 auto;
  position: relative;
}
.close-modal {
  cursor: pointer;
  position: absolute;
  right: 0;
  font-size: 30px;
  border-radius: 100%;
  -webkit-transition: all ease .3s;
  transition: all ease .3s;
}
.project-gallerey {
  float: left;
  width: 60%;
  position: relative;
}
.project-info {
  float: left;
  width: 32%;
  margin-top: 50px;
  margin-left: 35px;
  padding-left: 15px;
  position: relative;
  z-index: 2;
  background: rgba(255, 255, 255, 0.8);
}

Show me


  

    

      
X
      

        

        

          

            

            

            

          
        
      
      

        

          

            

              2013
              
              - 2014
              
            
            
desktop website
          
          

          
New Terracotta
          

            
            Javascript
            
            HTML5
& CSS3
            
            jQUery
            
          
          

            
            
- HTML5 & CSS3
            
            
- jQuery
            
            
- oo javascript
            
            
- SEO optimization
            
            
- cross browser compatibility
            
            
- project management
            
            
- DotNetNuke skinning
            
          
        
      
    
  




    

Ответы

Ответ 1

Возможно, я не до конца понял вашу логику. Но мне показалось, что вы слегка намудрили
с классами и напрасно использовали конструкцию 

var box = $('.modal-dark, .modal');


Таким образом, вы выбрали два элемента, родителя и потомка и работали с ним как с
одним: проверяли наличие класса, добавляли и убирали классы (одновременно обоим элементам).
Когда я навел в этой части порядок, т.е. разделил функции родителя и потомка (родитель
просто скрывается, а потомок исполняет анимацию) - все встало на свои места.



$(document).on("click", ".project__discr--active", function () {
//  $(' .modal-dark').removeClass('js-module-hide').show(600, 'swing');
  module();
});



$(document).on("click", ".js-close-modal", function () {
//  $(' .modal-dark').addClass('js-module-hide').hide(600, 'swing');
  module();
});

var box = $('.modal-dark'),
    modal = $('.modal');
function module () {
  if (box.hasClass('js-module-hide')) {
    box.removeClass('js-module-hide');
    setTimeout(function () {
      modal.removeClass('visuallyhidden');
    }, 20);
  } else {
    modal.addClass('visuallyhidden');
    modal.one('transitionend', function(e) {
      box.addClass('js-module-hide');
    });
  }
};
body {
  overflow: hidden;
}
.project__discr--active {
  display: inline-block;
  background: rgba(0, 2, 45, 0.4);
  cursor: pointer;
}
.visuallyhidden {
  -webkit-transform: translate3d(100%, 0, 0);
  -ms-transform: translate3d(100%, 0, 0);
  transform: translate3d(100%, 0, 0);
  opacity: 1;
}
.js-module-hide {
  display: none;
  opacity: 0;
}
.modal-dark {
  background: rgba(0, 0, 0, 0.8);
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 9;
}
.modal.js-module-hide {
  -webkit-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}
.visuallyhidden {
  -webkit-transform: translate3d(100%, 0, 0);
  -ms-transform: translate3d(100%, 0, 0);
  transform: translate3d(100%, 0, 0);
  opacity: 1;
}
.modal {
  height: 600px;
  background: #fff;
  position: absolute;
  top: 0;
  margin-top: 120px;
  padding: 20px 0;
  left: 0;
  width: 100%;
  z-index: 10;
  -webkit-transition: -webkit-transform 0.3s ease-out;
  transition: transform 0.3s ease-out;
  will-change: top;
}
.base {
  width: 100%;
  margin: 0 auto;
  position: relative;
}
.close-modal {
  cursor: pointer;
  position: absolute;
  right: 0;
  font-size: 30px;
  border-radius: 100%;
  -webkit-transition: all ease .3s;
  transition: all ease .3s;
}
.project-gallerey {
  float: left;
  width: 60%;
  position: relative;
}
.project-info {
  float: left;
  width: 32%;
  margin-top: 50px;
  margin-left: 35px;
  padding-left: 15px;
  position: relative;
  z-index: 2;
  background: rgba(255, 255, 255, 0.8);
}

Show me


  

    

      
X
      

        

        

          

            

            

            

          
        
      
      

        

          

            

              2013
              
              - 2014
              
            
            
desktop website
          
          

          
New Terracotta
          

            
            Javascript
            
            HTML5
& CSS3
            
            jQUery
            
          
          

            
            
- HTML5 & CSS3
            
            
- jQuery
            
            
- oo javascript
            
            
- SEO optimization
            
            
- cross browser compatibility
            
            
- project management
            
            
- DotNetNuke skinning