preudo元素上的css转换不起作用

Question

我试图按下按钮＆＃34;玩＆＃34;在视频框上，但<ion-item> <ion-avatar> <img src=" {{profileData.avatar}}"> </ion-avatar> </ion-item> 元素上的转换不起作用。

我做错了什么？

＆＃13;

＆＃13;

:before

＆＃13;

div{
  height: 100px;
  width: 100px;
  background-color: #000;
  position: relative;
  transition:1s;
}
div:before:hover{
  transition:1s;
}

div:hover:before{
  content:"";
  border-style: solid;
  border-width: 50px 0 50px 86.6px;
  border-color: transparent transparent transparent #0094d9;
  position: absolute;
  z-index: 9999;
  left: 45%;
  top: 40%;
  transition: 1s;
}

＆＃13;

＆＃13;

＆＃13;

Answer 1

只需在:before元素中添加所有css，而不是hover

div{
  height: 100px;
  width: 100px;
  background-color: #000;
  position: relative;
  transition:1s;
}
div:before{
  content:"";
  border-style: solid;
  border-width: 50px 0 50px 86.6px;
  border-color: transparent transparent transparent #0094d9;
  position: absolute;
  z-index: 9999;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  opacity: 0.5;
  transition: opacity 0.5s;
  -webkit-transition: opacity 0.5s;
}
div:hover:before{
  opacity: 1;
}

<div></div>

Answer 2

将样式移动到:before将有助于解决此问题。然后，您可以在:before上添加转换并转换border-color属性：

＆＃13;

＆＃13;

div{
  height: 100px;
  width: 100px;
  background-color: #000;
  position: relative;
}

div:before {
  content: "";
  position: absolute;
  z-index: 9999;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-style: solid;
  border-width: 50px 0 50px 86.6px;
  border-color: transparent;
  transition: all 1s linear;
}

div:hover:before{
  border-color: transparent transparent transparent #0094d9;
}

＆＃13;

<div></div>

＆＃13;

＆＃13;

＆＃13;

这是一个JS Fiddle示例。

Answer 3

我发现你可能在这里犯了一些错误就是解决方案。

＆＃13;

＆＃13;

div{
  height: 100px;
  width: 100px;
  background-color: #000;
  position: relative;
  transition:1s;
}
div:hover:before{
  transition:1s;
opacity:1;
}

div:before{
content: "";
border-style: solid;
border-width: 30px 0 30px 66.6px;
border-color: transparent transparent transparent #0094d9;
position: absolute;
z-index: 9999;
left: 50%;
top: 50%;
transition: 1s;
transform: translate(-50%, -50%);
opacity: 0.5;
}

＆＃13;

<div></div>

＆＃13;

＆＃13;

＆＃13;