我开发了一个CSS 3动画弹出气泡，它会弹出并放大。弹出动画结束后，绑定到map (\x -> (x, magicFunction x)) $ replicateM 6 [0..20]
的文本将以淡入效果显示。它使用 Angular Animate API。
我在这里分享它，以便代码可以帮助那些正在寻找类似解决方案的人。该代码适用于Chrome。至于其他浏览器，我还没有测试过它。
答案 0 :(得分：1)
此功能通过以下步骤实现
$scope控制器以弹出方式绑定数据。Angularjs函数使文字淡入。源代码如下。
这是timeout
HTML这是<body>
<div class="bubble"><div ng-controller="Fade" ng-show="bool" class="fade" ng-init="init()">{{data}}</div><div class="arrow"></div></div>
</body>
CSS这是.fade.ng-animate {
transition: 0.5s linear all;
opacity: 1;
}
.bubble {
position: relative;
display: inline-block;
width: 200px;
min-height: 50px;
padding: 20px;
background: #FFFFFF;
border: #7F7F7F solid 4px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
animation: popup 1.5s;
}
.arrow:before {
content: "";
position: absolute;
bottom: -19.5px;
left: calc(15% - 3px);
border-style: solid;
border-width: 18px 18px 0;
border-color: #7F7F7F transparent;
display: block;
width: 0;
z-index: 0;
animation: arrow 2s;
}
.arrow:after {
content: "";
position: absolute;
bottom: -15px;
left: 15%;
border-style: solid;
border-width: 15px 15px 0;
border-color: #FFFFFF transparent;
display: block;
width: 0;
z-index: 1;
animation: arrow 2s;
}
@keyframes popup {
0% {
top: 100px;
width: 100px;
}
100% {
top: 0px;
width: 200px;
}
}
@keyframes arrow {
0% {
top: inherit;
}
100% {
top: inherit;
}
}
Angularjs