如何创建可折叠功能区？ [英] How can I create a foldable ribbon?

问题描述

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

I'm looking for a way to program a foldable ribbon. So I've this code 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: 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 一词。当我现在将鼠标悬停在单词上时，功能区应该向左折叠，直到可以看到整个文本为止。当我现在离开功能区时，它应该折回去。

Now I need to change it somehow to only show the word New. When I hover now the word, the ribbon should fold out to the left until the whole text is visible. When I leave the ribbon now, it should fold back in.

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

Is this possible with a smooth animation? I need to be sure the the whole ribbon get's fold out because the length of the text can be different.

推荐答案

我会简化您的代码如下所示，那么使用宽度动画应该很容易管理：

I would simplify your code like below then it should be easy to manage using a width animation:

.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>

这篇关于如何创建可折叠功能区？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！