Question

我觉得这在语法上是正确的，并且适当地加上前缀。我试图使这些方括号从不透明度0和变换位置变为不透明度1并转换回悬停时的原始位置。目前，不透明度确实发生了变化，但未达到指定的转换时间。然而，变形根本不起作用。

包括我的小提琴。

.nav-tags {
  display: inline-block;
}

.nav-tags::before
.nav-tags::after{
  display: inline-block;
  opacity: 0;
  -webkit-transition: -webkit-transform 3s, opacity 2s;
  -moz-transition: -moz-transform 3s, opacity 2s;
  transition: transform 3s, opacity 2s;
} 

.nav-tags::before{
  margin-right: 10px;
  content: '[';
    opacity: 0;
  -webkit-transform: translateX(40px);
  -moz-transform: translateX(40px);
  transform: translateX(40px);
} 

.nav-tags::after{
  margin-left: 5px;
  content: ']';
  opacity: 0;
  -webkit-transform: translateX(-40px);
  -moz-transform: translateX(-40px);
  transform: translateX(-40px);
} 

.nav-tags:hover::before,
.nav-tags:hover::after,
.nav-tags:focus::before,
.nav-tags:focus::after {
    opacity: 1;
  -webkit-transform: translateX(500px);
  -moz-transform: translateX(500px);
  transform: translateX(500px);
}
`

https://jsfiddle.net/6dpncer1/

Answer 1

存在语法错误导致代码的其余部分被忽略。

.nav-tags::before // missing a comma here
.nav-tags::after{
  display: inline-block;
  opacity: 0;
  -webkit-transition: -webkit-transform 3s, opacity 2s;
  -moz-transition: -moz-transform 3s, opacity 2s;
  transition: transform 3s, opacity 2s;
}

修复此问题可使所有内容再次正常运行：https://jsfiddle.net/6dpncer1/1/

css转换不起作用

1 个答案: