我有一个 div，我想在其中显示一个人的名字。
我只想在正常状态下显示该人的名字。当您将鼠标悬停时，姓氏应出现在名字的右侧，其宽度从 0 扩展到正常宽度。所有这些文本都右对齐。
如果我将过渡应用于姓氏范围，它甚至不会显示。
我还尝试了 max-width （就像一个人在这里所做的那样： http: //jsfiddle.net/qP5fW/87/），但它不起作用。所以我做了一个包装 div，使用 width 而不是 max-width，现在它可以工作了，只是它根本不显示过渡。
我怀疑问题出在“auto”属性上，但如果有人知道如何进行转换，我将非常感激。
这是我的小提琴： https: //jsfiddle.net/drywrsy6/
HTML：
<div class="name">
<span class="first">John</span>
<div class="last-wrapper">
<span class="last">Doe</span>
</div>
</div>
CSS：
.name {
border: 1px solid lightgrey;
margin: 10px auto 0px auto;
padding: 5px;
width: 300px;
font-size: 2em;
text-align: right;
overflow: hidden;
white-space: nowrap;
}
.first {
font-style: italic;
}
.last-wrapper {
display: inline-block;
vertical-align: bottom;
overflow: hidden;
width: 0;
transition: all 1s;
}
.last {
color: red;
} …所以,我有这个嵌套数组,我无法修改其结构.我想检查键/值对是否存在,如果存在,则将相应的类添加到相关元素中.
我一直试图使用表达式的变体:
ng-class="{ 'active' : data.indexOf('"name":"john"') >= 0 }"
然而,我的表达有点复杂,我担心这样使用太多了.还有使用两个以上级别嵌套引号的问题.
这是一个使用与我正在使用的结构类似的数组的小提琴:
http://jsfiddle.net/5tvmL2Lg/2/
HTML:
<body ng-app="myModule">
<div ng-controller="myController">
<div ng-repeat="hero in heroes">
<div ng-class="{ 'weight-\'hero.stats.indexOf('\'type\':\'weight\'').value\'' : hero.stats.indexOf('\'type\':\'weight\'') >= 0 }">
hello
</div>
</div>
</div>
</body>
JS:
var myModule = angular.module('myModule', []);
myModule.controller('myController', ['$scope', function($scope) {
$scope.heroes = [{
"firstname" : "clark",
"lastname" : "kent",
"stats" : [
{
"type" : "height",
"value" : "6'2"
},
{
"type" : "weight",
"value" : 220
},
{
"type" : "hair",
"value" : "brown"
} …