为什么除了fade以外，其他方式都触发不了transition？
<!DOCTYPE html>
<html>
<head>
<title>下拉菜单</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="../css/base.css">
<style type="text/css">
.dropdown{
position: relative;
}
.dropdown-toggle{
z-index: 2;
position: relative;
}
.dropdown-arrow{
display: inline-block;
/*background-repeat: no-repeat;*/
vertical-align: middle;
}
.dropdown-layer{
position: absolute;
display: none;
overflow: hidden;
}
.dropdown-left{
left: 0;
right: auto;
}
.dropdown-right{
right: 0;
left: auto;
}
/*menu dropdown*/
.menu .dropdown-toggle{
display: block;
height: 100%;
padding: 0 16px 0 12px;
border-left: 1px solid #f3f5f7;
border-right: 1px solid #f3f5f7;
}
.menu .dropdown-arrow{
/*width: 8px;
height: 6px;*/
/*background-image: url(../img/dropdown-arrow.png);*/
margin-left: 8px;
}
.menu .dropdown-layer{
top: 100%;
background-color: #fff;
border: 1px solid #cdd0d4;
}
.menu-item{
display: block;
padding: 0 12px;
height: 30px;
line-height: 30px;
color: #4d555d;
/*不自动换行*/
white-space: nowrap;
}
.menu-item:hover{
background-color: #f3f5f7;
}
.menu-active .dropdown-toggle{
border-color: #cdd0d4;
background-color: #fff;
}
.menu-active .dropdown-arrow{
/*background-image: url(../img/dropdown-arrow-active.png);*/
}
/*.menu-active .dropdown-layer{
display: block;
}*/
[class*='-active'] .dropdown-arrow{
transform: rotate(180deg);
-o-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
}
.transition{
-o-transition: all .5s;
-ms-transition: all .5s;
-webkit-transition: all .5s;
-moz-transition: all .5s;
transition: all .5s;
}
@font-face {
font-family: "iconfont";
src: url('font/iconfont.eot?t=1579184198429'); /* IE9 */
src: url('font/iconfont.eot?t=1579184198429#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAANYAAsAAAAAB1wAAAMKAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDBgqCOIIbATYCJAMMCwgABCAFhG0HQRtsBhHVmyfIfhy4sdOQq7s+I6co5Z+D59G/r3Nz899k6AXgQbWEOqga1WuUcDY3q/yrURGKJTkP/pfvSDeEC+FHAPg8l9ObQAdyjW9Zjmuv50e9AOOAAt0D25pQgSToDWM3ETTE0xAgghJUQ9p16NYPhwVMEkCmTZ44GpdxYBvaBYcQVKy0yEZCOLPK5KHYwL8vn5nEgSGkgJm9JrQfR6u38e+O6EK/cBglUE7nA4x1oEA1wIKMqAwMQqNCNZQIz2Cb6wMsgpkq7T1c4esC+IcHBgEJAK1RAFRS9OailFgGA++OqK76HAUgACwwAZirsEkvFzQ5Pr7m2NXbUwZs37PjWHL/gTtOJG/bldRv69axa46d2rVw78mjq4+f3r9oz5kTo9dcy3FXV1/f7cbINcd27Uwq1m9n2t6bEVH9o9ew8CSfu/r06d0pQyJWH9+9WxadiYxs4U1O34ZmFffeLSub57Pa/q+bdeMtfMCC2nOztGGeL7uMcYsS/614Xr5oxb8KX1cUlX++4uthSSieVRBlFS8XnfW2rOjLpTKfXgureKVK7vk+16Zn/ozu/6ZGxaSMzB+JGzMP1Oj/sFNs9XsNIhJ3poxOnHKnUquU4s3aMgow1rwzDcAX6BOt+Rt+w4uY7k1Hxjb75iItAI86bOrAY77A0q0ZHAY6K1+6smOH9dXAqdZVYEUYUnrfgM+A3BYBeEAkgWfDLck3VhIcyQkMYRSH4ihHWrYaQkRSDwGOloigKh3XR5LIHBSx4UAVlkkQ4rgAQwy3oMSRT1r2KUKk8BUBcaKIYIAk7hiJU0GybstoBD3YP2RHe0Bu0aL9jvFqhtNqzr+Rz5yGsRvy5RV35CnmnJ84iQQITBss0nnYGsHBVNBJl0SOue9D1Ys6R5vStGU0gh6wfyA72gPtLbrw+TvGqxluEPTk38hnHhwY6Rg6kKth7yS4lUvOT5wQCUBg2oBF8mGDBQKO6mEFnXSkAbljple6ha6GbnnT9n77gAjALBUjKpao7GyaKaRqF7puE3H993IJlQIAAA==') format('woff2'),
url('font/iconfont.woff?t=1579184198429') format('woff'),
url('font/iconfont.ttf?t=1579184198429') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
url('font/iconfont.svg?t=1579184198429#iconfont') format('svg'); /* iOS 4.1- */
}
.icon {
font-family: "iconfont" !important;
font-size: 14px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-xialajiantou:before {
content: "\e6a3";
}
.icon-gouwuche:before {
content: "\e511";
}
body{
background-color: #eee;
}
.fadeOut{
/*表示一定会执行*/
visibility: hidden !important;
opacity: 0 !important;
}
.slideUpDownCollapse{
height: 0 !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
}
.slideLeftRightCollapse{
width: 0;
padding-right: 0;
padding-left: 0;
}
</style>
</head>
<body>
<!-- <div class="dropdown">
<div class="dropdown-toggle" ><i class="dropdown-arrow"></i></div>
<div class="dropdown-layer dropdown-left">
</div>
</div> -->
<div class="menu dropdown fl" data-active="menu">
<a class="dropdown-toggle">我的慕淘<i class="dropdown-arrow icon icon-xialajiantou transition"></i></a>
<ul class="dropdown-layer dropdown-left">
<li><a href="###" target="_blank" class="menu-item">已买到的宝贝</a></li>
<li><a href="###" target="_blank" class="menu-item">我的足迹</a></li>
</ul>
</div>
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript" src="../js/transition.js"></script>
<script type="text/javascript" src="../js/showHide(封装).js"></script>
<script type="text/javascript" src="../js/dropdown.js"></script>
<script type="text/javascript">
// $('.dropdown').hover(function(){
// var $this = $(this);
// $this.addClass($this.data('active')+'-active');
// },function(){
// var $this = $(this);
// $this.removeClass($this.data('active')+'-active');
// })
$('.dropdown').dropDown();
</script>
</body>
</html>
---------------
(function() {
var transition = window.mt.transition;
function inint($ele, hiddenCallback) {
if ($ele.is(':hidden')) {
$ele.data('status', 'hidden');
if (typeof hiddenCallback === 'function') hiddenCallback();
} else {
$ele.data('status', 'shown');
}
}
function show($ele, callback) {
//当元素状态为show或者shown时，不触发函数；
if ($ele.data('status') === 'show') return;
if ($ele.data('status') === 'shown') return;
//设置元素目前状态为show或者shown；
$ele.data('status', 'show').trigger('show');
callback();
}
function hide($ele, callback) {
if ($ele.data('status') === 'hide') return;
if ($ele.data('status') === 'hidden') return;
$ele.data('status', 'hide').trigger('hide');
callback();
}
var slient = {
//初始化函数（主要用于初始化元素的状态）
/*:hidden用于匹配隐藏的元素，is()方法用于判断是否该元素*/
inint: inint,
show: function($ele) {
show($ele, function() {
$ele.show();
$ele.data('status', 'shown').trigger('shown');
})
},
hide: function($ele) {
hide($ele, function() {
$ele.hide();
$ele.data('status', 'hidden').trigger('hidden');
});
}
}
var css3 = {
fade: {
inint: function($ele) {
css3._inint($ele, 'fadeOut');
},
show: function($ele) {
css3._show($ele, 'fadeOut');
},
hide: function($ele) {
css3._hide($ele, 'fadeOut');
}
},
slideUpDown: {
inint: function($ele) {
css3._inint($ele, 'slideUpDownCollapse');
},
show: function($ele) {
css3._show($ele, 'slideUpDownCollapse');
},
hide: function($ele) {
css3._hide($ele, 'slideUpDownCollapse');
}
},
slideLeftRight: {
inint: function($ele) {
css3._inint($ele, 'slideLeftRightCollapse');
},
show: function($ele) {
css3._show($ele, 'slideLeftRightCollapse');
},
hide: function($ele) {
css3._hide($ele, 'slideLeftRightCollapse');
}
},
fadeSlideUpDown: {
inint: function($ele) {
css3._inint($ele, 'fadeOut slideUpDownCollapse');
},
show: function($ele) {
css3._show($ele, 'fadeOut slideUpDownCollapse');
},
hide: function($ele) {
css3._hide($ele, 'fadeOut slideUpDownCollapse');
}
},
fadeSlideLeftRight: {
inint: function($ele) {
css3._inint($ele, 'fadeOut slideLeftRightCollapse');
},
show: function($ele) {
css3._show($ele, 'fadeOut slideLeftRightCollapse');
},
hide: function($ele) {
css3._hide($ele, 'fadeOut slideLeftRightCollapse');
}
}
};
css3._inint = function($ele, className) {
$ele.addClass('transition');
inint($ele, function() {
$ele.addClass(className);
})
};
css3._show = function($ele, className) {
show($ele, function() {
//先解绑原先的事件，再绑定现在的事件
$ele.off(transition.end).one(transition.end, function() {
console.log("执行show transition");
$ele.data('status', 'shown').trigger('shown');
})
$ele.show();
//使用setTimeout令事件异步进行，触发transition效果
setTimeout(function() {
$ele.removeClass(className);
}, 20);
})
};
css3._hide = function($ele, className) {
hide($ele, function() {
$ele.off(transition.end).one(transition.end, function() {
console.log("执行hide transition");
$ele.hide();
$ele.data('status', 'hidden').trigger('hidden');
})
$ele.addClass(className);
})
};
var js = {
fade: {
inint: function($ele) {
js._inint($ele);
},
show: function($ele) {
js._show($ele, 'fadeIn');
},
hide: function($ele) {
js._hide($ele, 'fadeOut')
}
},
slideUpDown: {
inint: function($ele) {
js._inint($ele);
},
show: function($ele) {
js._show($ele, 'slideDown');
},
hide: function($ele) {
js._hide($ele, 'slideUp')
}
},
slideLeftRight: {
inint: function($ele) {
js._customInint($ele, {
'width': '0',
'padding-right': '0',
'padding-left': '0'
})
},
show: function($ele) {
js._customShow($ele);
},
hide: function($ele) {
js._customHide($ele, {
'width': '0',
'padding-right': '0',
'padding-left': '0'
});
}
},
fadeSlideUpDown: {
inint: function($ele) {
js._customInint($ele, {
'opacity': '0',
'height': '0',
'padding-top': '0',
'padding-bottom': '0'
})
},
show: function($ele) {
js._customShow($ele);
},
hide: function($ele) {
js._customHide($ele, {
'opacity': '0',
'height': '0',
'padding-top': '0',
'padding-bottom': '0'
});
}
},
fadeSlideLeftRight: {
inint: function($ele) {
js._customInint($ele, {
'opacity': '0',
'width': '0',
'padding-right': '0',
'padding-left': '0'
})
},
show: function($ele) {
js._customShow($ele);
},
hide: function($ele) {
js._customHide($ele, {
'opacity': '0',
'width': '0',
'padding-right': '0',
'padding-left': '0'
});
}
}
}
js._inint = function($ele, hiddenCallback) {
//防止transition属性与jQuery动画冲突
$ele.removeClass('transition');
inint($ele, hiddenCallback);
}
js._customInint = function($ele, options) {
var styles = {};
for (var k in options) {
styles[k] = $ele.css(k);
}
$ele.data('styles', styles);
js._inint($ele, function() {
$ele.css(options);
})
}
js._show = function($ele, mode) {
show($ele, function() {
$ele.stop()[mode](function() {
$ele.data('status', 'shown').trigger('shown');
});
})
}
js._customShow = function($ele) {
show($ele, function() {
$ele.show();
$ele.stop().animate($ele.data('styles'), function() {
$ele.data('status', 'shown').trigger('shown');
})
})
}
js._hide = function($ele, mode) {
hide($ele, function() {
$ele.stop()[mode](function() {
$ele.data('status', 'hidden').trigger('hidden');
});
})
}
js._customHide = function($ele, options) {
hide($ele, function() {
$ele.stop().animate(options, function() {
$ele.hide();
$ele.data('status', 'hidden').trigger('hidden');
})
})
}
var defaults = {
css3: false,
js: false,
animation: 'fade'
};
function showHide($ele, options) {
var mode = null;
if (options.css3 && transition.issupport) {
mode = css3[options.animation] || css3[defaults.animation];
} else if (options.js) {
mode = js[options.animation] || js[defaults.animation];
} else {
mode = slient
}
mode.inint($ele);
return {
//使函数可以自动传参，不用手动
show: $.proxy(mode.show, this, $ele),
hide: $.proxy(mode.hide, this, $ele)
};
}
$.fn.extend({
showHide: function(option) {
return this.each(function() {
var $this = $(this),
options = $.extend({}, defaults, typeof option === 'object' && option),
mode = $this.data('showHide');
if (!mode) {
$this.data('showHide', mode = showHide($this, options));
}
if (typeof mode[option] === 'function') {
mode[option]();
}
})
}
})
})(jQuery)
-------------
(function($) {
'use strict'
function dropDown(ele) {
var $ele = $(ele);
var $layer=$ele.find('.dropdown-layer');
$layer.showHide({
css3:true,
js:true,
animation:'slideUpDown'
});
$ele.hover(function() {
var $this = $(this);
$this.addClass($this.data('active') + '-active');
$layer.showHide('show');
}, function() {
var $this = $(this);
$this.removeClass($this.data('active') + '-active');
$layer.showHide('hide');
})
}
$.fn.extend({
dropDown: function() {
return this.each(function() {
dropDown(this);
})
}
})
})(jQuery)
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星