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

转换动画将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>

转换和转换不起作用

2 个答案: