Как реализовать анимацию без 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>

Готово!

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