Html 使用CSS类制作动画
我有一个HTML组件,看起来像这样。 当我向该组件添加一个条件类时,底部的两个“div”应该将其位置更改为“Primart EMF”文本的右侧,如下所示 我可以通过使用display属性将其从Html 使用CSS类制作动画,html,css,Html,Css,我有一个HTML组件,看起来像这样。 当我向该组件添加一个条件类时,底部的两个“div”应该将其位置更改为“Primart EMF”文本的右侧,如下所示 我可以通过使用display属性将其从block更改为inline block来实现它。但这一转变并不顺利。我想给它添加一些动画,但是transition在display属性上不起作用 有人能指导我如何做到这一点吗 HTML 我不确定这是否可行,因为我只看到了代码的一部分,但通常使用转换和转换进行平滑转换更方便。希望下面的示例有帮助(单击红
block
更改为inline block
来实现它。但这一转变并不顺利。我想给它添加一些动画,但是transition
在display
属性上不起作用
有人能指导我如何做到这一点吗
HTML
我不确定这是否可行,因为我只看到了代码的一部分,但通常使用
转换
和转换
进行平滑转换更方便。希望下面的示例有帮助(单击红色边框按钮以查看过渡动画):
document.querySelector('.condition list').addEventListener('click',function(){this.classList.toggle('edit--mode--off'))代码>
。条件元素类型{
显示:内联块;
最大宽度:71px;
边际:2x10px0;
}
.条件元素名称{
显示:内联块;
转型:转型。4s放松;
}
.条件元素名称{
显示:内联块;
左边距:10px;
边界半径:8px;
颜色:$白色;
字体大小:11px;
保证金:0 8px 8px 0;
高度:计算(1em+5px);
填充:4px 8px 2px 8px;
保证金:-3px 8px 8px 0;
边框:1px纯红;
光标:指针;
}
.edit--mode--off.condition元素名称{
转换:转换(-100px,40px);
边缘顶部:5px;
}
-
初级电动势
创新
精通
我不确定这是否可行,因为我只看到了代码的一部分,但通常使用转换
和转换
进行平滑转换更方便。希望下面的示例有帮助(单击红色边框按钮以查看过渡动画):
document.querySelector('.condition list').addEventListener('click',function(){this.classList.toggle('edit--mode--off'))代码>
。条件元素类型{
显示:内联块;
最大宽度:71px;
边际:2x10px0;
}
.条件元素名称{
显示:内联块;
转型:转型。4s放松;
}
.条件元素名称{
显示:内联块;
左边距:10px;
边界半径:8px;
颜色:$白色;
字体大小:11px;
保证金:0 8px 8px 0;
高度:计算(1em+5px);
填充:4px 8px 2px 8px;
保证金:-3px 8px 8px 0;
边框:1px纯红;
光标:指针;
}
.edit--mode--off.condition元素名称{
转换:转换(-100px,40px);
边缘顶部:5px;
}
-
初级电动势
创新
精通
您不能使用显示,不可以,但您不能只使用平移
将所有元素移动到其新位置,然后应用过渡动画吗?我知道这是一个黑客解决方案,但是因为display
不支持transition
这种解决方法在这种情况下可能是有保证的。你不能使用display,不,但是你不能只使用translation
将所有元素移动到它们的新位置,然后应用一个transition动画吗?我知道这是一个黑客解决方案,但因为display
不支持transition
这种解决方案在这种情况下可能是有保证的。
<ul class="condition-list edit--mode--off"> <!-- edit--mode--off is a dynamic class-->
<li class="condition-element condition-element-selected">
<div class="condition-element-type">Primary EMF</div>
<div class="condition-element-names">
<div class="condition-element-name condition-growth">Innovation</div>
<div class="condition-element-name condition-achievement">Mastery</div>
</div>
</li>
</ul>
.condition-element-type {
display: inline-block;
max-width: 71px;
margin: 2px 10px 0 0;
}
.condition-element-names {
display: inline-block;
}
.condition-element-name {
display: inline-block;
margin-left: 10px;
border-radius: 8px;
color: $color-white;
font-size: 11px;
margin: 0 8px 8px 0;
height: calc(1em + 5px);
padding: 4px 8px 2px 8px;
margin: -3px 8px 8px 0;
}
.edit--mode--off .condition-element-names {
display: block !important;
margin-top: 5px;
}