javascript - 伪元素 (::before) 上的 CSS3 过渡不起作用

Question

我正在尝试使用伪元素设置边框样式。我有一个 div，这个 div 有一个顶部边框。当我将鼠标悬停在 div 上时，我希望边框有一个小箭头。我已经能够做到这一点，但我想要的是当我将鼠标悬停在 div 上时让小箭头SLIDE DOWN SLOWLY。我试图添加一些过渡，但过渡似乎不适用于::before 元素。我查看了 Stackoverflow 上提出类似问题的所有问题，但似乎没有一个解决方案能够解决我的问题

这是代码。

HTML

 <div class="flexContainer">
        <div class="flexContainerBox flexContainerBox1">
            <div class="flexContainerBoxBorderRight"></div>

        </div>
        <div class="flexContainerBox flexContainerBox2">
            <div class="flexContainerBoxBorderRight"></div>

        </div>
        <div class="flexContainerBox flexContainerBox3">
            <div class="flexContainerBoxBorderRight"></div>

        </div>
        <div class="flexContainerBox flexContainerBox4">
            <div class="flexContainerBoxBorderRight"></div>

        </div> 
        <div class="clear"></div>
    </div>

和 CSS

     .flexContainer {
        display: flex;
        flex-direction: row;
      }
    .flexContainerBox {
        flex: 1;
        border-top: 20px solid transparent;
        position: relative;
        padding: 50px;
        font-family: "Open Sans Bold";    
     }

    .flexContainerBoxBorderRight {
      border-right: 1px solid #ccc;
      position: absolute;
      top: 10%;
      bottom: 10%;
      right: 0;
    }
    .flexContainerBox1 {
        border-top-color: #15AF04;
        color: #15AF04
    }
    .flexContainerBox2 {
        border-top-color:#ffd470;
        color: #ffd470;
    }
    .flexContainerBox3 {
        border-top-color: #1b63b1;
        color: #1b63b1;
    }
    .flexContainerBox4 {
        border-top-color: #dd0000;
        color: #dd0000;    
    }
   .flexContainerBox::before{
        -webkit-transition: all 1.5s ease-in-out;
        -moz-transition: all 1.5s ease-in-out;
        -ms-transition: all 1.5s ease-in-out;
        -o-transition: all 1.5s ease-in-out;
        transition: all 1.5s ease-in-out;
    }
    .flexContainerBox:hover::before { 
        content: '';
        position: absolute;
        border: 15px solid transparent;
        border-bottom: 0;
        position: absolute;
        left: 50%;
        top: 0;
        -moz-transform: translate(-50%, 100%);
        -ms-transform: translate(-50%, 100%);
        -webkit-transform: translate(-50%, 100%);
        transform: translate(-50%, 0%);
        }
     .flexContainerBox1:hover::before { 
         border-top-color: #15AF04;
    }      
    .flexContainerBox2:hover::before { 
        border-top-color: #ffd470;
    }   
    .flexContainerBox3:hover::before { 
        border-top-color: #1b63b1;
    } 
    .flexContainerBox4:hover::before { 
        border-top-color: #dd0000;
    } 

任何解决方案，即使是 JQUERY 或 Pure JS 解决方案，我们都将不胜感激。

Answer 1

问题是当容器没有被悬停时伪元素不存在:

.flexContainerBox:hover::before { 
  content: '';
  position: absolute;
  border: 15px solid transparent;
  border-bottom: 0;
  position: absolute;
  left: 50%;
  top: 0;
  -moz-transform: translate(-50%, 100%);
  -ms-transform: translate(-50%, 100%);
  -webkit-transform: translate(-50%, 100%);
  transform: translate(-50%, 0%);
}

你应该将其中一些样式移动到 .flexContainerBox::before 样式(你有过渡样式的地方):

.flexContainerBox::before {
  content: '';
  position: absolute;
  border: 15px solid transparent;
  border-bottom: 0;
  position: absolute;
  left: 50%;
  top: 0;
  -webkit-transition: all 1.5s ease-in-out;
  -moz-transition: all 1.5s ease-in-out;
  -ms-transition: all 1.5s ease-in-out;
  -o-transition: all 1.5s ease-in-out;
  transition: all 1.5s ease-in-out;
}

要不为箭头的中心设置动画(translate(-50%, ...))，您可以添加:

-moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-webkit-transform: translateX(-50%);
transform: translateX(-50%);

还有一个小错别字:

transform: translate(-50%, 0%);

成为

transform: translate(-50%, 100%);

结果

.flexContainer {
  display: flex;
  flex-direction: row;
}

.flexContainerBox {
  flex: 1;
  border-top: 20px solid transparent;
  position: relative;
  padding: 50px;
  font-family: "Open Sans Bold";
}

.flexContainerBoxBorderRight {
  border-right: 1px solid #ccc;
  position: absolute;
  top: 10%;
  bottom: 10%;
  right: 0;
}

.flexContainerBox1 {
  border-top-color: #15AF04;
  color: #15AF04
}

.flexContainerBox2 {
  border-top-color: #ffd470;
  color: #ffd470;
}

.flexContainerBox3 {
  border-top-color: #1b63b1;
  color: #1b63b1;
}

.flexContainerBox4 {
  border-top-color: #dd0000;
  color: #dd0000;
}

.flexContainerBox::before {
  content: '';
  position: absolute;
  border: 15px solid transparent;
  border-bottom: 0;
  position: absolute;
  left: 50%;
  top: 0;
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  -webkit-transition: all 1.5s ease-in-out;
  -moz-transition: all 1.5s ease-in-out;
  -ms-transition: all 1.5s ease-in-out;
  -o-transition: all 1.5s ease-in-out;
  transition: all 1.5s ease-in-out;
}

.flexContainerBox:hover::before {
  -moz-transform: translate(-50%, 100%);
  -ms-transform: translate(-50%, 100%);
  -webkit-transform: translate(-50%, 100%);
  transform: translate(-50%, 100%);
}

.flexContainerBox1:hover::before {
  border-top-color: #15AF04;
}

.flexContainerBox2:hover::before {
  border-top-color: #ffd470;
}

.flexContainerBox3:hover::before {
  border-top-color: #1b63b1;
}

.flexContainerBox4:hover::before {
  border-top-color: #dd0000;
}

<div class="indexContainer whiteContainer flexContainer">
  <div class="flexContainerBox flexContainerBox1">
    <div class="flexContainerBoxBorderRight"></div>
    <div class="flexContainerBoxHeading">
      WORLD CLASS <span style="color:#111">FACILITIES</span>
    </div>
    <div class="flexContainerBoxTextBox">
      <ul>
        <li>Day & Boarding</li>
        <li>Secondary & Primary</li>
        <li>Ages 2 to 18</li>
        <li>200 Students </li>
        <li>Cambridge IGCSE & GCEs</li>
        <li>Beautiful sports facilities</li>
      </ul>
    </div>
  </div>
  <div class="flexContainerBox flexContainerBox2">
    <div class="flexContainerBoxBorderRight"></div>
    <div class="flexContainerBoxHeading">
      QUALITY <span style="color:#111">EDUCATION</span>
    </div>
    <div class="flexContainerBoxTextBox">
      <ul>
        <li>Over 10 Years Experience in Quality delivery</li>
        <li>Good resources for Students</li>
        <li>Student Oriented Learning</li>
        <li>Good Teaching staff </li>
        <li>Conducive Environment</li>
      </ul>
    </div>
  </div>
  <div class="flexContainerBox flexContainerBox3">
    <div class="flexContainerBoxBorderRight"></div>
    <div class="flexContainerBoxHeading">
      PERSONAL <span style="color:#111">TOUCH</span>
    </div>
    <div class="flexContainerBoxTextBox">
      <ul>
        <li>Small Class Sizes</li>
        <li>Low teacher:student Ratio</li>
        <li>Maximum contact with teachers</li>
        <li>Mentorship programs</li>
        <li>Student Counselling</li>
      </ul>
    </div>
  </div>
  <div class="flexContainerBox flexContainerBox4">
    <div class="flexContainerBoxBorderRight"></div>
    <div class="flexContainerBoxHeading">
      HOLISTIC <span style="color:#111">APPROACH</span>
    </div>
    <div class="flexContainerBoxTextBox">
      <ul>
        <li>Innovative Teaching Methods</li>
        <li>Use of Technology in learning</li>
        <li>Developing the "whole" child</li>
        <li>Nurturing Talents & Gifts</li>
        <li>Extra-curricular program</li>
        <li>Christ-Centered School</li>
      </ul>
    </div>
  </div>
  <div class="clear"></div>
</div>