自己封装好的showhide.js包含无动画、css3动画、js动画。
包括：fade（淡入淡出） slideUpDown（上下滑动） slideLeftRight（左右滑动） fadeSlideUpDown（淡入淡出+上下滑动） fadeSlideLeftRight （淡入淡出+左右滑动）
(function($){
var transition=window.mt.transition;//支持的transition写法
var isSupport=window.mt.isSupport;//是否支持transition
// 公共init
function init($elem,hiddenCall){
if($elem.is(":hidden")){
$elem.data("status","hidden");
if(typeof hiddenCall==="function") hiddenCall();
}else{
$elem.data("status","shown");
}
}
//公共show
function show($elem,callback){
if($elem.data("status")==="show") return;
if($elem.data("status")==="shown") return;
$elem.data("status","show").trigger("show");
callback();
}
// 公共hide
function hide($elem,callback){
if($elem.data("status")==="hide") return;
if($elem.data("status")==="hidden") return;
$elem.data("status","hide").trigger("hide");
callback();
}
// 无动画方式
var silent={
init:init,
show:function($elem){
show($elem,function(){
$elem.show();
$elem.data("status","shown").trigger("shown");
});
},
hide:function($elem){
hide($elem,function(){
$elem.hide();
$elem.data("status","hidden").trigger("hidden");
});
}
}
// css3动画方式
var css3={
_init:function($elem,className){
$elem.addClass("transition");
init($elem,function(){
$elem.addClass(className);
});
},
_show:function($elem,className){
$elem.off(transition).one(transition,function(){//动画执行完毕后执行shown
$elem.data("status","shown").trigger("shown");
})
$elem.show();
setTimeout(function(){
$elem.removeClass(className);
},20);
},
_hide:function($elem,className){
$elem.off(transition).one(transition,function(){
$elem.hide();
$elem.data("status","hidden").trigger("hidden");
})
$elem.addClass(className);
},
//淡入淡出
fade:{
init:function($elem){
css3._init($elem,"fadeOut");
},
show:function($elem){
show($elem,function(){
css3._show($elem,"fadeOut");
});
},
hide:function($elem){
hide($elem,function(){
css3._hide($elem,"fadeOut");
});
}
},
//上下滑动
slideUpDown:{
init:function($elem){
//$elem.height($elem.height());//获取到元素被内容撑开的高度，动态设置高度
css3._init($elem,"slideUpDownCollapse");
},
show:function($elem){
show($elem,function(){
css3._show($elem,"slideUpDownCollapse");
});
},
hide:function($elem){
hide($elem,function(){
css3._hide($elem,"slideUpDownCollapse");
});
}
},
//左右滑动
slideLeftRight:{
init:function($elem){
$elem.width($elem.width());//获取到元素被内容撑开的高度，动态设置高度
css3._init($elem,"slideLeftRightCollapse");
},
show:function($elem){
show($elem,function(){
css3._show($elem,"slideLeftRightCollapse");
});
},
hide:function($elem){
hide($elem,function(){
css3._hide($elem,"slideLeftRightCollapse");
});
}
},
//淡入淡出式上下滑动
fadeSlideUpDown:{
init:function($elem){
$elem.height($elem.height());//获取到元素被内容撑开的高度，动态设置高度
css3._init($elem,"fadeOut slideUpDownCollapse");
},
show:function($elem){
show($elem,function(){
css3._show($elem,"fadeOut slideUpDownCollapse");
});
},
hide:function($elem){
hide($elem,function(){
css3._hide($elem,"fadeOut slideUpDownCollapse");
});
}
},
//淡入淡出式左右滑动
fadeSlideLeftRight:{
init:function($elem){
$elem.width($elem.width());//获取到元素被内容撑开的高度，动态设置高度
css3._init($elem,"fadeOut slideLeftRightCollapse");
},
show:function($elem){
show($elem,function(){
css3._show($elem,"fadeOut slideLeftRightCollapse");
});
},
hide:function($elem){
hide($elem,function(){
css3._hide($elem,"fadeOut slideLeftRightCollapse");
});
}
}
}
// js动画方式
var js={
_init:function($elem,callback){
$elem.removeClass("transition");
init($elem,callback);
},
_show:function($elem,mode){
show($elem,function(){
$elem.stop()[mode](function(){
$elem.data("status","shown").trigger("shown");
});
});
},
_hide:function($elem,mode){
hide($elem,function(){
$elem.stop()[mode](function(){
$elem.data("status","hidden").trigger("hidden");
});
});
},
//自定义初始化公共部分
_customInit:function($elem,options){//options是一个对象，包含所有要改变的属性
var styles={};
for(var o in options){
styles[o]=$elem.css(o);
}
$elem.data("styles",styles);//如果不保存，则styles为局部，无法在其他函数中使用
js._init($elem,function(){
$elem.css(options);
});
},
_customShow:function($elem){
show($elem,function(){
var styles=$elem.data("styles");
$elem.show();
//使用animate进行动画
$elem.stop().animate(styles,function(){//动画结束后的回调
$elem.data("status","shown").trigger("shown");
});
});
},
_customHide:function($elem,options){
hide($elem,function(){
$elem.stop().animate(options,function(){//动画结束后的回调
$elem.hide();
$elem.data("status","hidden").trigger("hidden");
});
});
},
fade:{
init:function($elem){
js._init($elem);
},
show:function($elem){
js._show($elem,"fadeIn");
},
hide:function($elem){
js._hide($elem,"fadeOut");
}
},
slideUpDown:{
init:function($elem){
js._init($elem);
},
show:function($elem){
js._show($elem,"slideDown");
},
hide:function($elem){
js._hide($elem,"slideUp");
}
},
slideLeftRight:{
init:function($elem){
js._customInit($elem,{
"width":0,
"padding-left":0,
"padding-right":0
});
},
show:function($elem){
js._customShow($elem);
},
hide:function($elem){
js._customHide($elem,{
"width":0,
"padding-left":0,
"padding-right":0
});
}
},
fadeSlideUpDown:{
init:function($elem){
js._customInit($elem,{
"opacity":0,
"height":0,
"padding-top":0,
"padding-bottom":0
});
},
show:function($elem){
js._customShow($elem);
},
hide:function($elem){
js._customHide($elem,{
"opacity":0,
"height":0,
"padding-top":0,
"padding-bottom":0
});
}
},
fadeSlideLeftRight:{
init:function($elem){
js._customInit($elem,{
"opacity":0,
"width":0,
"padding-left":0,
"padding-right":0
});
},
show:function($elem){
js._customShow($elem);
},
hide:function($elem){
js._customHide($elem,{
"opacity":0,
"width":0,
"padding-left":0,
"padding-right":0
});
}
}
}
//设置默认参数
var defaults={
css3:false,
js:false,
animation:"fade"
};
//封装一个函数
function showHide($elem,options){
var mode=null;
if(options.css3 && isSupport){//css3动画
mode=css3[options.animation] || css3[defaults.animation];//容错
}else if(options.js){//js动画
mode=js[options.animation] || js[defaults.animation];
}else{//无动画
mode=silent;
}
mode.init($elem);
return {
show:$.proxy(mode.show,this,$elem),
hide:$.proxy(mode.hide,this,$elem)
};
}
// 改成jquery插件方式
$.fn.extend({
showHide:function(opt){
//this指向调用该插件的元素，这里是box
//可能是一个元素，也可以是多个元素，因此使用each遍历
return this.each(function(){
var ui=$(this);
// 如果options传递的是参数对象，则options属性与defaults属性进行合并，存入空对象中赋值给options
// 如果options传递的不是对象，则为false，属性为defaults默认属性，并赋值给options
// $.extend(target, obj1, objn) 对象合并
var options=$.extend({},defaults,typeof opt==="object" && opt);
/*
opt为参数对象时，如：
box.showHide({
css3:true,
animation:"slideLeftRight"
});
*/
var mode=ui.data("showHide");
//mode对象实例只需要生成一次
if(!mode){
mode=showHide(ui,options);//mode返回包含show和hide方法的一个对象
ui.data("showHide",mode);
}
/*
opt为show或者hide字符串时，如：
box.showHide("show");
*/
//如果options是show或者hide的字符串，则执行方法
if(typeof mode[opt]==="function"){
mode[opt]();
}
})
}
});
})(jQuery);页面使用方法：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>showhide</title>
<link rel="stylesheet" href="../css/base.css">
<style>
body{
width:400px;
margin:0 auto;
}
button{
width:50%;
height:30px;
background: #abcdef;
}
.box{
width:400px;
/*height:300px;*//*height撑开*/
/*padding:150px 0;*//*padding撑开*/
background-color:pink;
overflow:hidden;/*被内容撑开高度，需要设置溢出隐藏*/
}
.transition{
-webkit-transition:all .5s;
-moz-transition:all .5s;
-ms-transition:all .5s;
-o-transition:all .5s;
transition:all .5s;
}
.fadeOut{
opacity: 0;
visibility: hidden;
}
/*收缩样式*/
.slideUpDownCollapse{
height:0 !important;/*避免因为优先级不够而无法生效*/
padding-top:0 !important;
padding-bottom:0 !important;
}
.slideLeftRightCollapse{
width:0 !important;/*避免因为优先级不够而无法生效*/
padding-left:0 !important;
padding-right:0 !important;
}
</style>
</head>
<body>
<button id="btn-show">显示</button><button id="btn-hide">隐藏</button>
<div>
内容<br>
撑开<br>
高度<br>
</div>
<button>测试占位问题</button>
<script src="../js/jquery.js"></script>
<script src="../js/transition.js"></script>
<script src="../js/showhide.js"></script>
<script>
var box=$(".box");
//jquery插件方式传参
box.showHide({
css3:true,
animation:"slideLeftRight"
});//返回一个包含show和hide方法的对象mode
$("#btn-show").on("click",function(){
//jquery插件方式调用
box.showHide("show");
});
$("#btn-hide").on("click",function(e){
//jquery插件方式调用
box.showHide("hide");
});
box.on("show shown hide hidden",function(e){
if(e.type==="show"){
console.log("show");
}
if(e.type==="shown"){
console.log("shown");
}
if(e.type==="hide"){
console.log("hide");
}
if(e.type==="hidden"){
console.log("hidden");
}
});
</script>
</body>
</html>注意：引入的transition.js在之前的文章中已贴：https://www.cnblogs.com/chenyingying0/p/12363649.html
base.css：https://www.cnblogs.com/chenyingying0/p/12363689.html
原文：https://www.cnblogs.com/chenyingying0/archive/2020/02/25/12363707.html
纯CSS3实现各种表情动画
CSS3非常强大，我们可以利用CSS3相关特性绘制很多平面图形，并且可以制作很多简单的动画。今天要分享的是一款用纯CSS3实现的可爱表情动画
Vue.js动画笔记_vue实现动画效果
Vue.js中的元素动画或页面跳转动画有多种实现方式比如：1、自己手动写CSS3动画来实现2、使用第三方CSS动画库如：Animate.css3、在构子函数中操作DOM4、使用第三方Js动画库如：Velocity.js。
新手引导动画的4种实现方式
尽量多的列举出新手引导动画的实现方式, 昨天稍微总结了一下, 实现了4种.源码在最后,如果想直接看结果的,可以拉到最后去看.这里假设所有的弹出层都是基于页面上原有的元素
为何 Canvas 内元素动画总是在颤抖？
在项目中我们可能对动画进行锁帧，帧率可能是 60 或者 30，如果我们想保证渲染不抖动，在匀速直线运动中，我们尽量保证我们设置的速度要是帧率的倍数，或者保证平均每帧移动的像素点是一样的
前端开发常用css动画代码
常用的CSS动画效果，在实际开发中经常需要用到移动、大小、闪烁、渐显、渐隐等动画效果，这篇文章就整理了些常见的动画效果分享给大家,一遍收藏使用。
css环形滚动_内容加载的环形滚动动画效果
创建一个没有背景的圆，然后声明透明度为0.1的黑色边框(看起来是灰色)，修改左侧边框颜色。此时会有一个静态的看起来只有左边框有颜色的空心圆。然后声明一个该元素逆时针旋转360度的动画，并让该动画无限播放(infinite)即可
css transition 实现滑入滑出
transition是css最简单的动画。 通常当一个div属性变化时，我们会立即看的变化，从旧样式到新样式是一瞬间的，嗖嗖嗖！！！但是，如果我希望是慢慢的从一种状态，转变成另外一种状态，怎么办？ transition可以做到。
动画函数的绘制及自定义动画函数
制作动画效果离不开动画运动函数，而我们用得最多的无疑就是Tween.js。根据不同的数学公式原理，Tween.js划分出了不同的动画类型，每种动画类型里面都包含以下的缓动类型：ease in 先慢后快、ease out 先块后慢、ease in out 先慢后快再慢
超酷的CSS3 loading预加载动画特效
这是一款超酷CSS3 loading预加载动画特效。该loading特效共有4种不同的效果，分别通过不同的CSS3 keyframes帧动画来完成。HTML结构：4种loading预加载动画的HTML结构分别如下
Vue 动画的封装
js提供的钩子动画before-enter、enter、after-enter，用这种方法写，所有的动画都写在了组件里，外部只需要调用这个fade组件就可以了，也不需要全局去写一些样式了，这种动画的封装是比较推荐的一种动画封装，因为它可以把所有动画的实现完整的封装在一个组件中
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!