css - 我如何通过 CSS 转换 Ionicon？

Question

我正在尝试构建一个可以在标记中定位和旋转的 bouncy-arrow 指令。

angular.module('directives').directive("bouncyArrow", function ($compile) {

    return {
        replace: true,
        restrict: 'E',
        template: '<span class="ion-arrow-right-c"></span>',
        scope: {
            heading: '='
        },
        link: function (scope, element, attrs) {

            element.css('transform', 'rotate('+attrs.heading+'deg)');
            element.css('-webkit-transform', 'rotate('+attrs.heading+'deg)');

            element.css('background-color', 'red');

        }
    };

});

这出现在我的模板中:

<bouncy-arrow heading="15"></bouncy-arrow>

红色背景色的箭头正确显示。但是，转换没有效果。如何将转换应用于 ionicon？

更新:这是修复...

angular.module('directives').directive("bouncyArrow", function () {

    return {
        replace: true,
        restrict: 'E',
        template: '<span class="ion-arrow-right-c"></span>',
        scope: {
            heading: '=',
            scale: '=',
            positionx: '=',
            positiony: '='
        },
        link: function (scope, element, attrs) {

            var transforms = [
                'translate(' + attrs.positionx+'px,'+attrs.positiony + 'px)',
                'scale(' + attrs.scale + ')',
                'rotate(-'+attrs.heading+'deg)',
            ];

            var css = {
                selector: '.bouncy-arrow:before',
                rules: [
                    'transform: '+transforms.join(' '),
                    '-webkit-transform: '+transforms.join(' ')
                ]
            };


            var sheet = css.selector + ' {' + css.rules.join(';') + '}';
            angular.element(document).find('head').prepend('<style type="text/css">' + sheet + '</style>');

            element.addClass('bouncy-arrow');
        }
    };

});

Answer 1

您需要将转换应用于“ion-arrow-right-c”的 :before 伪类

我的建议是为您的元素创建一个自定义类，然后使用 css 进行转换。这样就干净多了。