js实现before :after伪类样式修改

发表于 | 分类于

为了能对区块的产生有一个更直观的认识，想让最新区块的产生有一个动画的展示效果（从无到有的弹入）。这里用js的animate函数来实现。之前有提到每个区块都用了伪类来添加样式，所以这里还需要对伪类样式作一些修改。

伪类样式修改方案

元素的before和after伪类的样式修改方案

要实现某个元素的before和after伪类的样式修改，方法有4种。CSS中并不能直接选择某一个元素的:before和:after伪类元素。

举个栗子说明4种方案

HTML结构

<div class="box">Hello,it's me.</div>

CSS样式

.box:after{
    content: '',
    font-weight: bold
}

方案1

使用js或者jQuery改变，为元素添加类

.blue:after{
    content: '',
    background-color: blue
}

$('div').addClass('blue');

方案2

在存在的style文档中动态插入样式

document.styleSheet[0].addRule('.box:after','background-color:blue');
document.styleSheet[0].insertRule('.box:after{background-color:blue}',0);

方案3

创建一份新的样式表，并使用js或jQuery将其插入到head标签中

var style = document.creatElement('style');
document.head.appendChild(style);

sheet = style.sheet;
sheet.addRule('.box:after','background-color:blue');
sheet.insetRule('.box:after{background-color:blue}',0);
<!-- 插入操作 -->
$('<style>.box:after{background-color:blue}</style>').appendTo('head');

方案4

使用HTML5的data-属性，在属性中使用attr()动态修改
先给div标签增加data-attr = 'orange'属性，然后用jQuery修改该属性值

.box:after{
        content: '',
        font-weight: bold,
        data-attr: 'orange'
    }

$('div').attr('data-attr','blue');

我的练习

最新区块修改伪类样式

说明：每个区块在展示时，因为有额外的图片和时间信息需要展示，所以借助了伪类before和after 具体实现可Pick我。

  • 原来的做法：在CSS中选择要应用伪类的元素，然后设置伪类样式

图1

图1 直接选择要应用伪类的元素，然后设置样式

  • 现在的做法：给某个类名设置伪类样式，然后将该类名添加给需要该样式的元素。用的是上面提到的4个方案中的方案1，这是比较简洁和方便的做法。

注意：after伪类显示区块产生时间，需要通过js设置data-content属性值，CSS用content属性，获取属性data-content的值

图2

图2 给某个类名应用伪类样式，before类设置小三角图片，after类显示区块产生时间

动态弹入效果

动态展示的最新区块，其HTML结构与其他区块不同，且还需要改变它的伪类样式。

实现过程

动态添加节点

首先把最新区块与其他区块分开。最新区块在页面加载完时是没有的，在写入区块信息之前，动态添加最新区块的节点。最新区块的HTML结构相比于其他区块，多了一层大的div.bnew，作用是为了显示链条的背景图，小三角，区块的产生时间(用到了before和after伪类，如图2所示)。因为每次刷新都需要动态添加最新区块的节点，因而在添加前需要把上一次的节点remove掉，所以具体实现如下所示。

图3

图3 jQUery动态操作节点

动画方法

动画实现用到的是jQuery的animate()方法，语法包含4个参数

$(selector).animate(styles,speed,easing,callback)

参数的具体设置如下：

1 .首先动态修改style参数。通过marginLeft来控制进入方向；width来控制显示范围；opacity控制初始的隐藏状态；
2 .然后填加动画时间为2000ms。

具体如图4所示。
图4

图4 给最新区块div.bnew添加动画

初始的div.bnew的CSS样式

图5

图5 初始的div.bnew样式设置

注：因为在animate方法中，display属性无法起作用，所以在初始的样式设置中要用opacity属性。

3 .注意easing参数的设置，内置的只有2种，如下所示。

图6

若要用到其他的运动轨迹需要添加库，然后引用，这里引用的是easeOutBounce。详细参数引用可Pick我

图7

4 .最后回调函数callback的设置。为div.bnew添加类名bnewT（伪类样式的设置）放在这里，如图4所示。

实现效果

效果图

-------------完-------------