如何创建可折叠色带？

Question

我正在寻找一种对可折叠色带进行编程的方法。所以我在这里有这段代码：

.ribbon {
  position: absolute;
  top: 20px;
  right: 0;
  padding: 15px;
}

.ribbon-content {
  position: relative;
  width: 100%;
  height: 100px;
  border: 1px solid #DDD;
}

.ribbon.base {
  background: #666666;
  color: #fff;
  border-right: 5px solid #666666;
}

.ribbon.light {
  background: #ecf0f1;
  color: #2c3e50;
  border-right: 5px solid #dde4e6;
}

.ribbon.dark {
  background: #131313;
  color: #fff;
  border-right: 5px solid #464646;
}

.ribbon.base-alt {
  background: #9cd70e;
  color: #fff;
  border-right: 5px solid #c6f457;
}

.ribbon.red {
  background: #e91b23;
  color: #fff;
  border-right: 5px solid #f2787d;
}

.ribbon.orange {
  background: #ff8a3c;
  color: #fff;
  border-right: 5px solid #ffc7a2;
}

.ribbon.yellow {
  background: #ffd800;
  color: #fff;
  border-right: 5px solid #ffe866;
}

.ribbon:before,
.ribbon:after {
  content: '';
  position: absolute;
  left: -9px;
  border-left: 10px solid transparent;
}

.ribbon:before {
  top: 0;
}

.ribbon:after {
  bottom: 0;
}

.ribbon.base:before {
  border-top: 27px solid #666666;
}

.ribbon.base:after {
  border-bottom: 27px solid #666666;
}

.ribbon.light:before {
  border-top: 27px solid #ecf0f1;
}

.ribbon.light:after {
  border-bottom: 27px solid #ecf0f1;
}

.ribbon.dark:before {
  border-top: 27px solid #131313;
}

.ribbon.dark:after {
  border-bottom: 27px solid #131313;
}

.ribbon.base-alt:before {
  border-top: 27px solid #9cd70e;
}

.ribbon.base-alt:after {
  border-bottom: 27px solid #9cd70e;
}

.ribbon.red:before {
  border-top: 27px solid #e91b23;
}

.ribbon.red:after {
  border-bottom: 27px solid #e91b23;
}

.ribbon.orange:before {
  border-top: 27px solid #ff8a3c;
}

.ribbon.orange:after {
  border-bottom: 27px solid #ff8a3c;
}

.ribbon.yellow:before {
  border-top: 27px solid #ffd800;
}

.ribbon.yellow:after {
  border-bottom: 27px solid #ffd800;
}

.ribbon span {
  display: block;
  font-size: 16px;
  font-weight: 600;
}

<div class="container bootstrap snippet">
  <div class="row mb-20">
    <div class="col-md-3">
      <div class="ribbon-content">
        <div class="ribbon base"><span>New: I'm a new feature.</span></div>
      </div>
    </div>
  </div>
</div>

现在，我需要以某种方式更改它以仅显示单词New。当我现在将单词悬停时，功能区应该向左折叠，直到整个文本可见为止。当我现在离开色带时，它应该折回去。

使用流畅的动画是否有可能？我需要确保将整个功能区折叠起来，因为文本的长度可以不同。

Answer 1

我会像下面那样简化您的代码，然后使用宽度动画应该易于管理：

.ribbon {
  --c:red;   /* Color */
  --s:20px; /* Size */
  --p:10px; /* padding*/
  
  padding:var(--p);
  border-left:calc(var(--s)/2) solid transparent;
  display:inline-block;
  background:
    linear-gradient(to top    right,transparent 48%,var(--c) 50%) border-box,
    linear-gradient(to bottom right,transparent 48%,var(--c) 50%) border-box,
    var(--c) padding-box;
  background-size:var(--s) 100%;
  background-repeat:no-repeat;
  color:#fff;
  margin-bottom:5px;
}

.ribbon > span {
  display:inline-block;
  white-space:nowrap;
  max-width:0px;
  transition:0.3s all;
  overflow:hidden;
  vertical-align:bottom;
}
.ribbon:hover > span {
  display:inline-block;
  white-space:nowrap;
  max-width:180px;
  transition:1s all;
}

body {
 text-align:right;
}

<div class="ribbon">
  NEW:<span> Some text here</span>
</div>
<br>
<div class="ribbon" style="--c:blue;--s:25px">
  NEW: <span>Some long long  text here</span>
</div>
<br>
<div class="ribbon" style="--c:purple;--s:45px;--p:15px">
  NEW: <span>text</span>
</div>
<br>

Answer 2

如果您不想要卷曲效果，我认为这可能对您有所帮助。

.ribbon {
  position: absolute;
  top: 20px;
  right: 0;
  padding: 15px;
  transform: translate3d(145px, 0, 0);
  transition: transform 300ms;
}

.ribbon-content {
  position: relative;
  width: 100%;
  height: 100px;
  border: 1px solid #DDD;
  overflow: hidden;
}

.ribbon-content:hover .ribbon {
  transform: translate3d(0, 0, 0);
}

.ribbon.base {
  background: #666666;
  color: #fff;
  border-right: 5px solid #666666;
}

.ribbon.light {
  background: #ecf0f1;
  color: #2c3e50;
  border-right: 5px solid #dde4e6;
}

.ribbon.dark {
  background: #131313;
  color: #fff;
  border-right: 5px solid #464646;
}

.ribbon.base-alt {
  background: #9cd70e;
  color: #fff;
  border-right: 5px solid #c6f457;
}

.ribbon.red {
  background: #e91b23;
  color: #fff;
  border-right: 5px solid #f2787d;
}

.ribbon.orange {
  background: #ff8a3c;
  color: #fff;
  border-right: 5px solid #ffc7a2;
}

.ribbon.yellow {
  background: #ffd800;
  color: #fff;
  border-right: 5px solid #ffe866;
}

.ribbon:before,
.ribbon:after {
  content: '';
  position: absolute;
  left: -9px;
  border-left: 10px solid transparent;
}

.ribbon:before {
  top: 0;
}

.ribbon:after {
  bottom: 0;
}

.ribbon.base:before {
  border-top: 27px solid #666666;
}

.ribbon.base:after {
  border-bottom: 27px solid #666666;
}

.ribbon.light:before {
  border-top: 27px solid #ecf0f1;
}

.ribbon.light:after {
  border-bottom: 27px solid #ecf0f1;
}

.ribbon.dark:before {
  border-top: 27px solid #131313;
}

.ribbon.dark:after {
  border-bottom: 27px solid #131313;
}

.ribbon.base-alt:before {
  border-top: 27px solid #9cd70e;
}

.ribbon.base-alt:after {
  border-bottom: 27px solid #9cd70e;
}

.ribbon.red:before {
  border-top: 27px solid #e91b23;
}

.ribbon.red:after {
  border-bottom: 27px solid #e91b23;
}

.ribbon.orange:before {
  border-top: 27px solid #ff8a3c;
}

.ribbon.orange:after {
  border-bottom: 27px solid #ff8a3c;
}

.ribbon.yellow:before {
  border-top: 27px solid #ffd800;
}

.ribbon.yellow:after {
  border-bottom: 27px solid #ffd800;
}

.ribbon span {
  display: block;
  font-size: 16px;
  font-weight: 600;
}

<div class="container bootstrap snippet">
  <div class="row mb-20">
    <div class="col-md-3">
      <div class="ribbon-content">
        <div class="ribbon base"><span>New: I'm a new feature.</span></div>
      </div>
    </div>
  </div>
</div>

Answer 3

您可以通过将“ new”之后的文本包装在div内并对CSS进行一些更改来轻松完成此操作：

• 包装'：我是新功能。'在<div class="infotext"></div>内
• 将.ribbon span的显示从block更改为可弯曲
• 为新类.infotext添加css规则，如下例所示

悬停会因CSS属性transition而变得活跃起来。使用all，我们告诉它为所有内容设置动画并在0.5s中进行。

  

要了解有关transition的更多信息，请查看this documentation。

max-witdh: 0;隐藏文本，max-width: 300px显示文本。

  

我正在使用最大宽度而不是宽度，因为我们不必   知道每个功能区信息文本的宽度。要了解有关max-width click here

的更多信息

---

如有任何不清楚之处，请随时向我询问。

---

工作示例：

.ribbon {
    position: absolute;
    top: 20px;
    right: 0;
    padding: 15px;
}
.ribbon-content{
    position: relative; 
    width: 100%; 
    height: 100px; 
    border: 1px solid #DDD;    
}
.ribbon.base {
    background: #666666;
    color: #fff;
    border-right: 5px solid #666666;
}
.ribbon.light {
    background: #ecf0f1;
    color: #2c3e50;
    border-right: 5px solid #dde4e6;
}
.ribbon.dark {
    background: #131313;
    color: #fff;
    border-right: 5px solid #464646;
}
.ribbon.base-alt {
    background: #9cd70e;
    color: #fff;
    border-right: 5px solid #c6f457;
}
.ribbon.red {
    background: #e91b23;
    color: #fff;
    border-right: 5px solid #f2787d;
}
.ribbon.orange {
    background: #ff8a3c;
    color: #fff;
    border-right: 5px solid #ffc7a2;
}
.ribbon.yellow {
    background: #ffd800;
    color: #fff;
    border-right: 5px solid #ffe866;
}
.ribbon:before, .ribbon:after {
    content: '';
    position: absolute;
    left: -9px;
    border-left: 10px solid transparent;
}
.ribbon:before {
    top: 0;
}
.ribbon:after {
    bottom: 0;
}
.ribbon.base:before {
    border-top: 27px solid #666666;
}
.ribbon.base:after {
    border-bottom: 27px solid #666666;
}
.ribbon.light:before {
    border-top: 27px solid #ecf0f1;
}
.ribbon.light:after {
    border-bottom: 27px solid #ecf0f1;
}
.ribbon.dark:before {
    border-top: 27px solid #131313;
}
.ribbon.dark:after {
    border-bottom: 27px solid #131313;
}
.ribbon.base-alt:before {
    border-top: 27px solid #9cd70e;
}
.ribbon.base-alt:after {
    border-bottom: 27px solid #9cd70e;
}
.ribbon.red:before {
    border-top: 27px solid #e91b23;
}
.ribbon.red:after {
    border-bottom: 27px solid #e91b23;
}
.ribbon.orange:before {
    border-top: 27px solid #ff8a3c;
}
.ribbon.orange:after {
    border-bottom: 27px solid #ff8a3c;
}
.ribbon.yellow:before {
    border-top: 27px solid #ffd800;
}
.ribbon.yellow:after {
    border-bottom: 27px solid #ffd800;
}

.ribbon span {
    display: flex;
    font-size: 16px;
    font-weight: 600;
}

.ribbon .infotext {
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
  max-width: 0;
  white-space: nowrap;
  overflow: hidden;
}

.ribbon:hover .infotext {
  max-width: 300px;
}

<div class="container bootstrap snippet">
    <div class="row mb-20">
        <div class="col-md-3">
            <div class="ribbon-content">
                <div class="ribbon base"><span>New<div class="infotext">: I'm a new feature.</div></span></div>
            </div>
        </div> 
    </div>
</div>

Answer 4

尝试使用JqueryUI获得动画效果。我尚未对其进行测试，但这可能会给您带来灵感。

<div class="container bootstrap snippet">
    <div class="row mb-20">
        <div class="col-md-3">
            <div class="ribbon-content">
                <div class="ribbon base"><span class='newSpn'>New:</span><span class='content'> I'm a new feature.</span></div>
            </div>
        </div> 
    </div>
</div>

$('.newSpn').mouseenter(function(){
   $('.content').show('slide', {direction: 'left'}, 1000);
}).mouseleave(function(){
   $('.content').hide('slide', {direction: 'right'}, 1000);
});

它需要jQuery-ui库。参见http://www.jqueryui.com