作法：使用Angularjs效果的CSS3動畫Popup氣泡和文字淡入淡出

Question

我已經開發了一個CSS 3動畫彈出氣泡，它將在上方彈出並放大。 彈出動畫結束后，綁定到$scope的文本將顯示為帶有淡入效果。 它使用Angular Animate API。

我在這里分享它，以便代碼可以幫助正在尋找類似解決方案的人們。 該代碼將在Chrome上運行。 至於其他瀏覽器，我還沒有測試過。

Answer 1

通過執行以下步驟可以實現此功能，

通過CSS設置彈出框的屬性。
設置關鍵幀動畫以產生彈出效果。
調用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);
        };
    }]);

作法：使用Angularjs效果的CSS3動畫Popup氣泡和文字淡入淡出

問題描述

1 個解決方案

解決方案1
1 已采納 2016-05-13 05:58:25

作法：使用Angularjs效果的CSS3動畫Popup氣泡和文字淡入淡出

問題描述

1 個解決方案

解決方案1 1 已采納 2016-05-13 05:58:25

解決方案1
1 已采納 2016-05-13 05:58:25