[英]Why can’t I get this simple CSS transition to work?
I'm trying to learn and practice CSS transitions but I don't know why I can't get this div class=text
transition to work.我正在尝试学习和练习 CSS 转换,但我不知道为什么我不能让这个
div class=text
转换工作。
const menuToggle = document.querySelector('.toggle') const showCase = document.querySelector('.showcase') const text = document.querySelector('.text') menuToggle.addEventListener('click', () => { menuToggle.classList.toggle('active') showCase.classList.toggle('active') text.classList.toggle('active') })
.text { position: absolute; z-index: 6; transition-duration: 0.9s; transition-timing-function: ease; }.text.active { left: 950px; }
<div class="text"> <h2>This</h2> <h3>Transition</h3> <p> Lorem </p> <a href="#">Hover</a> </div>
Here is the codepen so see the full picture https://codepen.io/Code_Blues/pen/vYgGeXQ这是代码笔,请查看完整图片https://codepen.io/Code_Blues/pen/vYgGeXQ
I'm trying to transition the div class=text
easing to the right when the menu toggle
is clicked but it doesn't seem to work.当单击
menu toggle
时,我正在尝试将div class=text
缓动转换为右侧,但它似乎不起作用。
Can anyone help and tell me what I seem to be doing wrong?谁能帮助并告诉我我似乎做错了什么? I would be really grateful.
我将不胜感激。
Thank you very much.非常感谢。
One possible solution for you is using transform: translate functions.一种可能的解决方案是使用 transform: translate 函数。
For example, Try something like that instead you current.text.active class.例如,尝试类似的方法,而不是 current.text.active class。
.text.active{ transform: translateX(400px) } .text.active{ 转换: translateX(400px) }
left: 100px;
left: 100px;
to .text
..text
。. . .
.text {
position: absolute;
z-index: 6;
transition-duration: 0.9s;
transition-timing-function: ease;
left: 100px;
}
.text.active {
left: 950px;
}
. . .
You need to provide .text
with an initial position.您需要提供带有初始 position 的
.text
。 Now if you will add left: 0;
现在,如果您要添加
left: 0;
it will start from the complete start of the window.它将从 window 的完整启动开始。
And overall you have added a 100px
padding
to the .showcase
section
.总体而言,您在
100px
section
添加了.showcase
像素的padding
。 So we will add add left: 100px;
所以我们将添加 add
left: 100px;
to make the text align with other elements.使文本与其他元素对齐。
left: 0;
left: 0;
: left: 100px;
left: 100px;
: You can define different values for transition properties like height.您可以为高度等过渡属性定义不同的值。
.text{
position: absolute;
z-index: 6;
height: 300px;
transition-duration: 2s;
transition-timing-function: ease;
}
.text.active{
height: 10px;
left:950px;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.