javascript - 从左到右淡入文本,反之亦然
问题描述
我需要知道如何使文本随着 div floating_mask 的增长而出现。现在文本在增长 div 时文本在翻译结束时放在两行中,因为 div 如果保持不变,则已经达到 100%。
.floating {
display: flex;
align-items: center;
padding: 4px;
justify-content: flex-start;
}
.container {
z-index: 1;
margin-left: 60px;
margin-right: 20px;
}
.mask {
overflow: hidden;
position: relative;
border: 1px solid lightgrey;
height: 54px;
width: 54px;
transition: width 1s;
display: flex;
align-items: center;
transform: translateX(2px);
}
.button:hover + .mask{
width: 200px;
}
.button {
position: absolute;
border: 1px solid lightgrey;
border-radius: 50%;
background-color: white;
padding: 12px;
z-index: 2;
top:17px;
left:17px;
}
}
<div class="floating">
<button type="button" class="button ">
Icon
</button>
<div class="mask">
<div class="container">
<p style="margin: 0;font-size:14px">Message group</p>
<p style="margin: 0;font-size:14px">Message group</p>
</div>
</div>
</div>
解决方案
简单的方法是
在单词之间使用。
.floating {
display: flex;
align-items: center;
padding: 4px;
justify-content: flex-start;
}
.container {
z-index: 1;
margin-left: 60px;
margin-right: 20px;
}
.mask {
overflow: hidden;
position: relative;
border: 1px solid lightgrey;
height: 54px;
width: 54px;
transition: width 1s;
display: flex;
align-items: center;
transform: translateX(2px);
}
.button:hover + .mask{
width: 200px;
}
.button {
position: absolute;
border: 1px solid lightgrey;
border-radius: 50%;
background-color: white;
padding: 12px;
z-index: 2;
top:17px;
left:17px;
}
}
<div class="floating">
<button type="button" class="button ">
Icon
</button>
<div class="mask">
<div class="container">
<p style="margin: 0;font-size:14px">Message group</p>
<p style="margin: 0;font-size:14px">Message group</p>
</div>
</div>
</div>
推荐阅读
- sql - Sql Query 与输出中 1 条记录中列出的帐户的所有名称记录
- c++ - GLSL 着色器编译调试器导致控制台上出现大量字符 \x00
- python - 如何将变量从if循环更改为全局?
- python - Pytest tmpdir_factory 抛出错误“预期的二进制或 unicode 字符串,获取本地”
- javascript - 检查输入是否为数组,并打印结果
- javascript - 导航栏菜单响应
- html - 如何在两个 col-sm-6 网格框中给出边距?
- matlab - 数字图像处理中的通道
- tinymce - TinyMCE 5 自定义按钮图标
- linux - 查找解密文件的-k值(openssl)