CSS Transition Font потрясающий контент - PullRequest
Новая
       7

CSS Transition Font потрясающий контент

0 голосов
/ 15 октября 2018

Я не смогу анимировать шрифт. Псевдоэлемент.

Вот мой 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%);
}

Как сделать так, чтобы при добавлении класса к родительскому элементу он изменял содержимое и анимировал его. 

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

То, чего я пытаюсь добиться, - это стрелка вправозатем нажмите на элемент меню, добавьте класс «open» и измените содержимое на стрелку вниз.Но я бы хотел оживить вращение справа налево.Возможно ли это?

1 Ответ

0 голосов
/ 15 октября 2018

Используя 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>
...