[英]How to: CSS3 animated Popup bubble and text Fade in effect with Angularjs
我已经开发了一个CSS 3动画弹出气泡,它将在上方弹出并放大。 弹出动画结束后,绑定到$scope
的文本将显示为带有淡入效果。 它使用Angular Animate API。
我在这里分享它,以便代码可以帮助正在寻找类似解决方案的人们。 该代码将在Chrome上运行。 至于其他浏览器,我还没有测试过。
通过执行以下步骤可以实现此功能,
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
angular.module('app', ['ngAnimate'])
.controller('Fade', ['$scope', '$timeout', function ($scope, $timeout) {
$scope.init = function () {
$scope.data = "This text will fade-in";
$timeout(function () {
$scope.bool = true;
}, 2000);
};
}]);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.