过渡和转换不起作用

Question

我的代码转换和转换不起作用。

我的CSS

div.panel {
  display: none;
}
div.panel.show {
  display: block !important;
}
.panel.show .text-light{
  transform:translateY(10%);
  background:red;
  transition-delay:3s;
}

完整代码是 here。感谢您的帮助

Answer 1

试试这个

div.panel .text-light{
        width: 0;
     height: 0;
     opacity: 0;
 }

div.panel.show .text-light{
       width: 100%;
    height: 100%;
    opacity: 1;

}
.panel.show .text-light{
   transform:translateY(10%);
     -webkit-transition: all 1s ease-in-out;
     -moz-transition: all 1s ease-in-out;
        transition: all 1s ease-in-out;
  background:red;
}

您的代码存在的问题是您将转换应用到其样式未被您编写的代码更改的元素。仅当您应用过渡的元素的 css 发生一些变化时，过渡才会起作用。

Answer 2

Transition 动画化 state1 到 state1 的过程。

首先你应该设置属性 transition 并设置动画的参数，多长时间。然后是可选的 - 动画类型（缓动、缓入缓出等）、延迟等等，您可以在此处找到 https://www.w3schools.com/cssref/css3_pr_transition.asp.

然后您需要更改要设置动画的属性。例如

.animated {
  background-color: #eee;
  border: 2px dashed black;
  border-radius: 5px;
  
  width: 100px;
  height: 100px;
  
  /*
    this is your transition for background-color 
    also you could set 'all' insted of propety which will animate any change of element
  */
  transition: background-color .5s ease;
}

/* There is a second state which we want to apply a transition to */
.animated:hover {
  background-color: #e6e;
}

<div class="animated">
 Hover me
</div>

过渡和转换不起作用

Transition and transform not working

html

css

transition