CSS 过渡字体很棒的内容

Question

我不希望能够为 font awesome 伪元素设置动画。

这是我的 HTML

<li class="has-submenu">
    <a onclick="$(this).toggleClass('open').closest('.has-submenu').find('.submenu').toggleClass('closed')" class="parent" href="javascript:;">
        <i class="fa fa-fw fa-file-text-o"></i> <span class="sidebar-collapse-hide">Reports</span>
    </a>
    <ul class="submenu">
        <li>
            <a href="/cases">
                <i class="fa fa-fw fa-briefcase"></i> <span class="sidebar-collapse-hide">Cases</span>
            </a>
        </li>
        <li>
            <a href="/time">
                <i class="fa fa-fw fa-clock-o"></i> <span class="sidebar-collapse-hide">Facility Time</span>
            </a>
        </li>
    </ul>
</li>

假设我有一个像这样的伪元素

.parent:after {
   content: '\f0da';
   font-family:"FontAwesome";
   position: absolute;
   right: 15px;
   top: 50%;
   transform: translate(-50%, -50%);
   -webkit-transform: translate(-50%, -50%);
}

我怎样才能做到，当我向父元素添加 class 时，它会更改内容并为其设置动画。

.parent {
   &.open:after {
     content: '\f0d7'!important;
   }
}

我想要实现的是在菜单项上有一个右箭头，然后在单击它时添加 'open' class 并将内容更改为向下箭头。但我希望它能为从右到下的旋转设置动画。可能吗？

Answer 1

通过使用 transform: rotate() 和过渡效果。

$('.parent').click(function() {
 $(this).toggleClass('open');
});

.parent {
 position: relative;
 display: inline-block;
 cursor: pointer;
 font-size: 18px;
}

.parent:after {
  content: "\f0da";
  font-family: "FontAwesome";
  position: absolute;
  right: -20px;
  top: -5px;
  font-size: 25px;
  transform: rotate(0);
  transition: transform .5s ease;
}

.parent.open:after {
  transform: rotate(90deg);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

<div class="parent">Parent element</div>

CSS 过渡字体很棒的内容

CSS Transition Font awesome content

html

css

pseudo-element