我有一个简单的盒子，上面有画边框动画。每个框都应该以不同的方向绘制框，但是我在控制绘制线的方向时遇到问题。
这是我的jsFiddle。
和代码：
$(document).ready(function() {
$(function($, win) {
$.fn.inViewport = function(cb) {
return this.each(function(i,el){
function visPx(){
var H = $(this).height(),
r = el.getBoundingClientRect(), t=r.top, b=r.bottom;
return cb.call(el, Math.max(0, t>0? H-t : (b<H?b:H)));
} visPx();
$(win).on("resize scroll", visPx);
});
};
}(jQuery, window));
$(".js-fade-in-left").inViewport(function(px){
if(px) $(this).addClass("o-fade-in-up") ;
});
$(".js-fade-in-right").inViewport(function(px){
if(px) $(this).addClass("o-fade-in-up") ;
});
$(".js-fade-in-down").inViewport(function(px){
if(px) $(this).addClass("o-fade-in-up") ;
});
$(".js-fade-in-up").inViewport(function(px){
if(px) $(this).addClass("o-fade-in-up") ;
});
$(".js-fade-in").inViewport(function(px){
if(px) $(this).addClass("o-fade-in") ;
});
$(".panel-box").inViewport(function(px){
if(px) $(this).addClass("active") ;
});
}); body {
background:#000000;
color:white;
}
.o-rel {
position:relative;
}
.panel-wrapper {
background-size:cover;
padding:120px 0;
}
.panel-box {
position:absolute;
top:50%;
transform:translateY(-50%);
border:1px solid white;
padding:5% 12%;
width:60%;
right:-1px;
border:0;
background:none;
z-index:10;
}
.panel-box::before,
.panel-box::after {
box-sizing: inherit;
content: '';
position: absolute;
border: 1px solid transparent;
width: 0;
height: 0;
}
.panel-box::before {
top: 0;
right: 0;
}
.panel-box::after {
left: 0;
bottom: 0;
}
.panel-box.active::before {
width: 100%;
height: 100%;
border-top-color: white;
transition: width 0.25s ease-out, height 0.25s ease-out 0.25s;
}
.panel-box.active::after {
width: 100%;
height: 100%;
border-left-color: white;
border-bottom-color: white;
transition: border-color 0s ease-out 0.5s, height 0.25s ease-out 0.75s, width 0.25s ease-out 0.5s ;
}
.panel-box-left {
left:-11px;
right:auto;
}
.panel-box-left::before {
top: 0;
right:0;
}
.panel-box-left::after {
bottom: 0;
left:0;
}
.panel-box-left.active::before {
width: 100%;
height: 100%;
border-top-color: white;
border-right-color: white;
transition: width 0.25s ease-out, height 0.25s ease-out 0.25s;
}
.panel-box-left.active::after {
width: 100%;
height: 100%;
border-bottom-color: white;
border-left-color: white;
transition: border-color 0s ease-out 0.5s, height 0.25s ease-out 0.75s, width 0.25s ease-out 0.5s ;
}
.js-fade-in-left {
opacity: 0;
transform: translate(-20px, 0px);
transition: all 0.5s ease-out 0s;
}
.js-fade-in-right {
opacity: 0;
transform: translate(20px, 0px);
transition: all 0.5s ease-out 0s;
}
.js-fade-in-down {
opacity: 0;
transform: translate(0px, -100px);
transition: all 0.5s ease-out 0s;
}
.js-fade-in-up {
opacity: 0;
transform: translate(0px, 20px);
transition: all 0.7s ease-out 0s;
}
.js-fade-in {
opacity: 0;
transition: all 0.5s ease-out 0s;
}
.o-fade-in-up {
opacity: 1;
transform: translate(0px, 0px);
}
.o-fade-in {
opacity: 1;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="o-rel panel-wrapper">
<div class="panel-box">
<div class="js-fade-in-right">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce in interdum lectus, non auctor diam. Sed maximus mi a quam vestibulum, quis iaculis justo gravida. Morbi sollicitudin augue et quam accumsan commodo. Suspendisse eget dignissim sapien. Cras a eros ac risus rhoncus rhoncus. Curabitur gravida tempor nulla. Aenean id ante eget sapien feugiat varius eget sed velit. Donec eleifend ultrices dui et accumsan. Nam dapibus rhoncus odio nec interdum. Aliquam erat volutpat. Praesent ullamcorper mattis elit.
</div>
</div>
</div>
<div class="o-rel panel-wrapper">
<div class="panel-box panel-box-left">
<div class="js-fade-in-left">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce in interdum lectus, non auctor diam. Sed maximus mi a quam vestibulum, quis iaculis justo gravida. Morbi sollicitudin augue et quam accumsan commodo. Suspendisse eget dignissim sapien. Cras a eros ac risus rhoncus rhoncus. Curabitur gravida tempor nulla. Aenean id ante eget sapien feugiat varius eget sed velit. Donec eleifend ultrices dui et accumsan. Nam dapibus rhoncus odio nec interdum. Aliquam erat volutpat. Praesent ullamcorper mattis elit.
</div>
</div>
</div>
我想动画的顶部/第一个框
我想让底部/第二个框动画化：
如何控制边框动画的方向以实现此目的？