Jquery 显示和隐藏动作的单独缓和

我有一个div（#photographrinfo）和position:fixed，单击按钮时显示。javascript在div上设置一个类，用于在视口中设置该类的动画。退出全屏模式时，将删除该类

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

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

关于#摄影师信息：

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

#photographerInfo.showfullscreen {
    right:30px;
}

这一切都很好，但当我删除类以隐藏div时，我希望使用easeIn而不是easeOut

如何做到这一点？

---

谢谢

通过将

添加类

逻辑切换到

切换类

，并将

缓入

转换指定给基类，将

缓出

转换指定给切换类，您可以获得项目在显示时缓出，在隐藏时缓入的效果

另一方面，我建议设置一个类的样式而不是id。我不知道你的站点是什么样子，但是如果你想扩展/重用你的动画逻辑，如果它只影响一个id，你可能会遇到问题

函数切换全屏（）{
$（“#摄影师信息”）.toggleClass（'showfullscreen'）；
}

#摄影师信息{
位置：固定；
过渡：所有1都容易进入；
右：0；
}
#全屏显示{
右：100px；
过渡：所有1都放松；
}

切换
你好，世界

您需要更改

.showfullscreen

类中的

转换计时功能

规则

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

关于过渡计时功能属性

下面是一个例子：

var btn=document.getElementById（'toggle'），
动画=假；
btn.addEventListener（'click'，function（）{
（动画===false）？openFullscreen（）：removeFullscreen（）；
动画=！动画；
});
函数openFullscreen（）{
$（“#摄影师信息”）.addClass（'showfullscreen'）；
}
函数removeFullscreen（）{
$（“#摄影师信息”）.removeClass（'showfullscreen'）；
}

#摄影师信息{
动画延迟：2s；
过渡：所有800毫秒都放松；
右：0px；
位置：固定；
宽度：150px；
高度：150像素；
背景：849274；
}
#全屏显示{
右：130px；
过渡时间功能：轻松进入；
}

使有生气

谢谢，太简单了！