From 359f961a9eda7c92943914b2b03ae90e33cddcb1 Mon Sep 17 00:00:00 2001 From: Minwe Date: Tue, 26 Jul 2016 09:52:03 +0800 Subject: [PATCH] [improved] enable Tabs overflow content, resolves #833, #901 --- docs/javascript/tabs.md | 71 +++++++++++++++++++++++++++++++++++++++++ js/ui.tabs.js | 5 ++- less/ui.tabs.less | 8 +++++ 3 files changed, 83 insertions(+), 1 deletion(-) diff --git a/docs/javascript/tabs.md b/docs/javascript/tabs.md index 20098f114..a6d81fa44 100644 --- a/docs/javascript/tabs.md +++ b/docs/javascript/tabs.md @@ -269,6 +269,77 @@ doc: docs/javascript/tabs.md ``` +### Tab 内容溢出容器问题 + +为了实现动画效果，标签内容容器 `.am-tabs-bd` 上添加了 `overflow: hidden`，在某些场景会有一些问题（[#833](https://github.com/amazeui/amazeui/issues/833)、[#901](https://github.com/amazeui/amazeui/issues/901)），目前的处理方式是在 `.am-tabs-bd` 上添加 `.am-tabs-bd-ofv`（动画效果会被取消）。 + +`````html +
+ +
+
+ 置身人群中
你只需要被淹没 享受 沉默
退到人群后
你只需给予双手 微笑 等候 +
+
+ + +
+
+
+ 走在忠孝东路
徘徊在茫然中
在我的人生旅途
选择了多少错误
我在睡梦中惊醒
感叹悔言无尽
恨我不能说服自己
接受一切教训
让生命去等候
等候下一个漂流
让生命去等候
等候下一个伤口 +
+
+ 我就这样告别山下的家，我实在不愿轻易让眼泪留下。我以为我并不差不会害怕，我就这样自己照顾自己长大。我不想因为现实把头低下，我以为我并不差能学会虚假。怎样才能够看穿面具里的谎话？别让我的真心散的像沙。如果有一天我变得更复杂，还能不能唱出歌声里的那幅画？ +
+
+
+````` +```html +
+ +
+
+ 置身人群中
你只需要被淹没 享受 沉默
退到人群后
你只需给予双手 微笑 等候 +
+
+ + +
+
+
+ 走在忠孝东路
徘徊在茫然中
在我的人生旅途
选择了多少错误
我在睡梦中惊醒
感叹悔言无尽
恨我不能说服自己
接受一切教训
让生命去等候
等候下一个漂流
让生命去等候
等候下一个伤口 +
+
+ 我就这样告别山下的家，我实在不愿轻易让眼泪留下。我以为我并不差不会害怕，我就这样自己照顾自己长大。我不想因为现实把头低下，我以为我并不差能学会虚假。怎样才能够看穿面具里的谎话？别让我的真心散的像沙。如果有一天我变得更复杂，还能不能唱出歌声里的那幅画？ +
+
+
+``` + ## 调用方式 ### 通过 Data API diff --git a/js/ui.tabs.js b/js/ui.tabs.js index e8c184612..5a9b17ba6 100644 --- a/js/ui.tabs.js +++ b/js/ui.tabs.js @@ -163,7 +163,10 @@ Tabs.prototype.activate = function($element, $container, callback) { this.transitioning = false; }, this); - transition ? $active.one(supportTransition.end, complete) : complete(); + + + transition && !this.$content.is('.am-tabs-bd-ofv') ? + $active.one(supportTransition.end, complete) : complete(); }; /** diff --git a/less/ui.tabs.less b/less/ui.tabs.less index e06227eba..777697447 100644 --- a/less/ui.tabs.less +++ b/less/ui.tabs.less @@ -72,6 +72,14 @@ // @since 2.5 .@{ns}tabs-bd-ofv { overflow: visible; + + > .@{ns}tab-panel { + display: none; + + &.@{ns}active { + display: block; + } + } } // fade animation in React version