Как реализовать анимацию без Jquery на «Битрикс»

Возможности библиотеки Jquery колоссальны. По дереву DOM переход она обеспечивает, обработку событий осуществляет, дополнения AJAX реализует. Но любят ее не за это. Баснословную популярность среди разработчиков Jquery обеспечивают многочисленные, разнообразные и очень симпатичные анимационные эффекты. Де - факто Jquery считается инструментом № 1 для реализации анимационных элементов сайта. Но если в проекте требуется только анимация, то нельзя ли реализовать ее без Jquery, средствами «Битрикс»? Можно, и вот как это делается.

1. Ссылка, вызывающая блок с анимацией

<div class="col-md-3 col-reg-extra">
      <a href="" id="register_link" >Зарегистрироваться
            <img src="/images/register_icon.png">
      </a>
</div>

2. Код блока с анимацией

<div class="row" id="block_set_password">
       <div class="col-md-6">                                        
               <input type="text" name="DATE_FROM" class="form-control" placeholder="дата начала" />                                       
       </div>
       <div class="col-md-6">                                        
               <input type="text" name="DATE_TO" class="form-control" placeholder="дата конца" />                                       
       </div>
</div>

3. Метод «Битрикс», реализующий анимацию

<script type="text/javascript">
            BX.ready(function(){
                // приучаемся использовать namespace для своих фишек - это полезно
                scope_auth = {}
                
                scope_auth.showHideRegFields = function(animate_elem){
                    if(!this.toggle_animate) 
                        this.toggle_animate = 0;
                    if(this.toggle_animate) { //need hide
                        this.height_begin = 100;
                        this.opacity_begin = 100;
                        this.height_end = 0;
                        this.opacity_end = 0;
                        this.toggle_animate = 0;
                    } else {                            //need show
                        animate_elem.style.display = 'block';
                        this.height_begin = 0;
                        this.opacity_begin = 0;
                        this.height_end = 100;
                        this.opacity_end = 100;
                        this.toggle_animate = 1;
                    }
                    // анимация заключается в изменение прозрачности элемента (opacity)
                    var anim = new BX.easing({
                        duration : 800,
                        start : { height : this.height_begin, opacity : this.opacity_begin },
                        finish : { height : this.height_end, opacity: this.opacity_end },
                        transition : BX.easing.transitions.quart,
                        step : function(state){                           
                            animate_elem.style.opacity = state.opacity/100;
                        },
                        complete : function() {
                            if(this.toggle_animate) animate_elem.style.display = 'none';
                        }
                    });
                    anim.animate();
                    return false;
                } 
            
                var block_set_password = BX('block_set_password');
                
            });
        </script>

4. Подключение обработчика

<div class="col-md-3 col-reg-extra">
      <a href="" id="register_link" onclick="scope_auth.showHideRegFields(block_set_password);" >Задать дату активности
            <img src="/images/date_icon.png">
      </a>
</div>

Готово!

Назад в раздел