Если очень не хочется грузить какой-нибудь JQuery из-за всякой анимационной ерунды, которой на сайте немного, то можно воспользоваться возможностями BX-фреймворка от Битрикса.
допустим есть ссылка при нажатии на которой должен появляться какой-то блок с элементами:
блок который должен появляться или исчезать при нажатии на нашей кнопке:
добавляем метод реализующий анимацию:
Данная функция меняет прозрачность блока и изменяет его свойство display (none<->block) за 800 милисекунд
Чтобы теперь данная анимация использовалась при возникновении события (в нашем случае клике) у элемента (в нашем случае ссылки) добавляем для неё обработчик:
Данным способом можно использовать данную анимацию для разных блоков при наступлении различных событий у разных элементов на странице.
P.S. Не забываем подключить на всякий случай BX: <?CJSCore::Init(array('window'));?>
допустим есть ссылка при нажатии на которой должен появляться какой-то блок с элементами:
<div class="col-md-3 col-reg-extra"> <a href="" id="register_link" >Зарегистрироваться <img src="/images/register_icon.png"> </a> </div> |
<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> |
добавляем метод реализующий анимацию:
<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>
|
Чтобы теперь данная анимация использовалась при возникновении события (в нашем случае клике) у элемента (в нашем случае ссылки) добавляем для неё обработчик:
<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> |
P.S. Не забываем подключить на всякий случай BX: <?CJSCore::Init(array('window'));?>
Группы на сайте создаются не только сотрудниками «1С-Битрикс», но и партнерами компании. Поэтому мнения участников групп могут не совпадать с позицией компании «1С-Битрикс».
