Question

有一种方法可以通过边框样式制作动画吗？

使用SCSS：

.check {
    ...
    transition: border-style .2s linear;
    border-style: dashed;
    &.opened {
        border-style: solid;
    }
}

这样，虚线画布将被填充成为实心。但是，显然，上面的代码不起作用。有一种方法可以使用JS，svg或任何方法。有什么想法吗？

小提琴示例

https://jsfiddle.net/2p4hnvve/

Answer 1

由于某些浏览器无法为border-style属性设置动画，因此也可以使用SVG完成此操作。

首先，我们创建一个框作为inline-svg：

<svg class="box" width="400" height="300"
     xmlns="http://www.w3.org/2000/svg">

  <rect x="0" y="0" width="400" height="300"/>
</svg>

然后我们使用CSS对其进行样式设置，并为其赋予一个带有stroke-dasharray属性的统一虚线边框。在悬停时，我们为该属性设置动画，以便每个破折号额外占用间隙的空间，并且间隙占用0％：

.box rect {
    fill: none;
    stroke: blue;
    stroke-width: 1em;
    stroke-dasharray: 10% 10%;
    transition: stroke-dasharray 0.2s linear;
}

.box:hover rect {
    stroke-dasharray: 20% 0%;
}

这是一个小提琴：http://jsfiddle.net/d5bc06op/3/

＆＃13;

.box rect {
  fill: none;
  stroke: blue;
  stroke-width: 0.25em;
  stroke-dasharray: 6% 6%;
  transition: stroke-dasharray 0.2s ease;
}

.box:hover rect {
  stroke-dasharray: 12% 0%;
}

＆＃13;

<svg class="box" width="120" height="90"
     xmlns="http://www.w3.org/2000/svg">

  <rect x="0" y="0" width="120" height="90"/>
</svg>

＆＃13;

Answer 2

为了回答我之前的小评论，我为你做了一个JS小提琴。看起来有用，如果你使用另一个html元素：

<div class="round">
   <div class="round_bis"></div>
</div>

flags chart

Answer 3

我可能会在<div>中的该元素内创建position:absolute，然后使用box-shadow进行播放，因为它接受转换。

请查看以下解决方法：

.check {
    -webkit-transition: all 0.5s;
    transition: all 0.5s;
    height: 50px;
    width: 50px;
    position: relative;
    left: 0px;
    box-shadow: 0 0 0 3px transparent;
}
.check > div {
    position: absolute;
    -webkit-transition: all 0.5s;
    transition: all 0.5s;
    width: 100%;
    height: 100%;
    border: 3px dashed #ccc;
    left: -3px;
    top: -3px;
}

.check:hover {
    box-shadow: 0 0 0 3px #ccc;
}

.check:hover > div {
    opacity: 0;
}

<div class="check"><div></div></div>

Answer 4

尝试添加

transition: all 0.2s;

动画边框风格

小提琴示例

4 个答案: