Question

我需要一个CSS / SCSS / SASS大师帮我确定这个简单的动画我做错了什么。

目标：我正在尝试完成一个简单的动画，其中fontawesome图标fa-angle-right在单词onHover之后从左侧飞入。我想这可以通过display: none属性完成并向父属性添加一些transition，但它不是按预期动画。

这里需要注意的是，我无法更改HTML结构。

An example of what I'm trying to do;但是，这是使用不同的HTML结构＆amp; SVG而不是fontawesome图标

JSFiddle ：https://jsfiddle.net/bwrmam9o/1/

HTML

<a href="#" class="btn ripple">
     <i class="fa fa-left fa-location-arrow"></i> 
     <span class="label">View Location </span>
     <i class="fa fa-right fa-angle-right fa-animate"></i>
</a>

SCSS / SASS

.btn{
  display: inline-block;
  color: #FFF;
  background: #CB5039;
  text-decoration: none;
  font-family: Arial;
  padding: 10px 12px;
  text-transform: uppercase;
  font-size: 13px;
  font-weight: bold;
  transition: all 0.1s cubic-bezier(0.16, 0.08, 0.355, 1);
  .fa-left{
    margin-right: 5px;
  }
  .fa-right{
    margin-left: 5px;
  }
  .fa-animate{
    display: none;
    transition: all 0.1s cubic-bezier(0.16, 0.08, 0.355, 1);
  }
  &:hover{
    background: blue;
    .fa-animate{
      display: inline-block;
    }
  }
}

.ripple {
  position: relative;
  overflow: hidden;
  transform: translate3d(0, 0, 0);
}
.ripple:after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  pointer-events: none;
  background-image: radial-gradient(circle, #FFF 10%, transparent 10.01%);
  background-repeat: no-repeat;
  background-position: 50%;
  transform: scale(10, 10);
  opacity: 0;
  transition: transform .25s, opacity 1s;
}
.ripple:active:after {
  transform: scale(0, 0);
  opacity: .2;
  transition: 0s;
}

对此的任何帮助将不胜感激！

Answer 1

这是你想要的吗？修改这样的风格。

.fa-animate{
 left: -15px;
 position:relative;
 opacity: 0;
 transition: 1s;
}
&:hover{
 background: blue;
 .fa-animate{
  left: 0;
  opacity:1;
 }
}

完整编辑的代码：https://jsfiddle.net/jayakrishnancn/bwrmam9o/3/

在锚标记内动画fontawesome图标以便在onhover

1 个答案: