在过去的两天里,我一直在处理位于<span>
代码之间的内联文字。
对于接近我正在寻找的效果的东西,请查看:
在JSFiddle上,在“结果”框中,将鼠标悬停在黄色“激活Div”上。如果您使用Chrome浏览器,则粉红色文字会像tape measure缩进一样卷起,绿色文本会像拉出的卷尺一样展开。那种滑动的“出现”和“消失”是我想要的效果。
为实现这一点,我在字母间距值之间使用CSS转换(请参阅“删除”和“插入”类)。粉红色突出显示的文本从正常间距过渡到高负间距(从可见到不可见),绿色突出显示的文本在高负间距到正常间距(从不可见到可见)之间转换。
问题是这种方法确实会使浏览器脱颖而出。它在Chrome上运行正常(尽管它非常紧张,有时会出现无法突出显示的文本的问题)。它似乎根本不适用于Safaari--粉红色和绿色部分分别消失并出现。
我尝试使用带有“溢出”的<div>
标记和JQuery的.animate()
来实现效果(在高宽度和低宽度div之间设置动画并隐藏从低宽度溢出的溢出文本DIV)。这种方法非常有效,直到你有文字打破这一行 - 它根本不起作用,所以这种方法似乎是不可能的(除非有人知道我不知道的事情)。
所以,百万美元的问题:有没有人知道插件或其他技术来进行这种内联文本操作,甚至跨换行?
答案 0 :(得分:0)
要在Safari中使用它,您需要使用前缀版本的转换。这意味着您需要将-webkit-transition
添加到常规transition
。
我相应地更新了你的jsFiddle:http://jsfiddle.net/6uf96/7/