Отдельное смягчение для действий «Выявить» и «Скрыть» - PullRequest
Новая
       10

Отдельное смягчение для действий «Выявить» и «Скрыть»

0 голосов
/ 10 сентября 2018

У меня есть div (#photographerInfo) с позицией: исправлено, которое отображается при нажатии кнопки. Javascript устанавливает класс для div, который анимирует его в окне просмотра. При выходе из полноэкранного режима класс удаляется. 

function openFullscreen(){       
    $('#photographerInfo').addClass('showfullscreen');
}

function removeFullscreen(){         
    $('#photographerInfo').removeClass('showfullscreen');
}

на #photographerInfo: 

#photographerInfo{
    animation-delay: 2s;
    transition: all 400ms ease-out;
    right: 0px;
    position:fixed;
}

#photographerInfo.showfullscreen {
    right:30px;
}

Это все прекрасно, но когда я убираю класс, чтобы скрыть div, я хотел бы иметь easeIn вместо easeOut.

Как это можно сделать? Спасибо

Ответы [ 2 ]

0 голосов
/ 10 сентября 2018

Вам необходимо изменить правило transition-timing-function в классе .showfullscreen. 

#photographerInfo.showfullscreen {
    right: 30px;
    transition-timing-function: ease-in;
}

Подробнее о transition-timing-function недвижимости.

Вот пример: 

var btn = document.getElementById('toggle'),
    animated = false;
btn.addEventListener('click', function() {
  (animated === false) ? openFullscreen():removeFullscreen();
  animated = !animated;
});
function openFullscreen(){    
  $('#photographerInfo').addClass('showfullscreen');
}

function removeFullscreen() {    
  $('#photographerInfo').removeClass('showfullscreen');
}
#photographerInfo{
    animation-delay: 2s;
    transition: all 800ms ease-out;
    right: 0px;
    position:fixed;
    width: 150px;
    height: 150px;
    background: #849274;
}

#photographerInfo.showfullscreen {
    right: 130px;
    transition-timing-function: ease-in;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" id="toggle">Animate</button>
<div id="photographerInfo"></div>
0 голосов
/ 10 сентября 2018

Переключив логику addClass на toggleClass ref и назначив ease-in переход вашего базового класса и ease-out переход к вашему классу переключения, вы получите эффект, когда элемент облегчает отображение и облегчает скрытие.

Кстати, я бы порекомендовал стилизовать класс вместо идентификатора. Я не знаю, как выглядит ваш сайт, но если вы когда-нибудь захотите расширить / повторно использовать логику анимации, у вас могут возникнуть проблемы, если это повлияет только на один идентификатор. 

function toggleFullscreen(){       
    $('#photographerInfo').toggleClass('showfullscreen');
}
#photographerInfo{
    position:fixed;
    transition: all 1s ease-in;
    right: 0;
}

#photographerInfo.showfullscreen {
    right:100px;
    transition: all 1s ease-out;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button onclick="toggleFullscreen();">
Toggle
</button>

<div id="photographerInfo">
  Hello world
</div>
...