html - 2 个具有不同延迟的 css 过渡

Question

在我的页面上有一个橙色的容器。如果我将鼠标悬停在框上并等待 0.5 秒，则边界半径(右下角和左下角)会发生变化。没关系。但我想如果我将鼠标停留在框上方 1 秒，边框半径(右上角和左上角)会发生变化。

• 延迟 0.5 秒后，边界半径(右下和左下)
• 延迟 1 秒后，边界半径(右上和左上)

这里是 myPage + 盒子代码:

.text{
    text-align: justify;
    background-color: orange;
    margin-bottom: 100px;
    background-color: #FFCD57;
    padding: 20px 20px 20px 20px;
    word-wrap:break-word;
    transition: all 0.5s 0.3s;
}

.text:hover{
    border-bottom-right-radius: 40px;
    border-bottom-left-radius: 40px;
}

                <div class="text">
                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.   

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet,
                </div>

Answer 1

您可以使用 setTimeout() 进行第二次延迟。

var text = document.getElementsByClassName('text')[0];
var anim;

text.addEventListener('mouseover', function() {
  anim = setTimeout(function() {
    text.style.borderTopRightRadius = '40px';
    text.style.borderTopLeftRadius = '40px';
  }, 1500);
});

text.addEventListener('mouseleave', function() {
  clearInterval(anim);
  text.style.borderTopRightRadius = '0';
  text.style.borderTopLeftRadius = '0';
});

.text {
  text-align: justify;
  background-color: orange;
  margin-bottom: 100px;
  background-color: #FFCD57;
  padding: 20px 20px 20px 20px;
  word-wrap: break-word;
  transition: all 0.5s 0.3s;
}
.text:hover {
  border-bottom-right-radius: 40px;
  border-bottom-left-radius: 40px;
}
.top {
  border-top-left-radius: 40px;
  border-top-right-radius: 40px;
}

<div class="text">
  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
  sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
  Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos
  et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla
  facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet,
</div>