在 CODEPEN 上使用已编译或未编译的 css 重新创建动画？答案

【问题标题】：Use of compiled or uncompiled css on CODEPEN to re-create an animation?在 CODEPEN 上使用已编译或未编译的 css 重新创建动画？
【发布时间】：2018-01-31 10:16:00
【问题描述】：

下面的 codepen 动画可以选择使用已编译或未编译的 css，这是我以前从未见过或遇到过的。

无论哪种方式，我都尝试在样式表中编译和未编译来离线重新创建动画，但它不起作用。

我用普通的 CSS 尝试了其他代码笔，并且重新创建工作正常。

任何人都可以对此有所了解吗？如果我要重新创建样式表，需要在样式表中添加什么内容？

https://codepen.io/DesignyourCode/pen/QEBYpW

未编译的 css 开始如下：

 CSS Options

@import 'bourbon';

html, body {
    height: 100%;
}
1
@import 'bourbon';
2

3
html, body {
4
    height: 100%;

在此示例中编译的 css 位置：

html, body {
  height: 100%;
}

body {
  background: black;
  overflow-x: hidden;
  padding: 50px;
  position: relative;
  text-align: center;
}

【问题讨论】：

你确定问题出在 CSS 而不是 JS 部分吗？
@Temani - 你是什么意思？首先，我需要知道要在样式表中使用哪个版本未编译或已编译。然后，我可以继续排查是否是JS部分
除非您使用 SCSS，否则您需要使用编译后的 CSS。
就像@Turnip说的，如果你只考虑CSS，你需要离线使用编译过的......顺便说一句，这不是一个编译与否的问题，而是使用SCSS或CSS的问题
@Temani，你能发布一个答案，展示我如何让它工作。我在名为 style.css 的样式表中离线使用了编译后的版本，并使用了从 html 文件到它的 ref 链接。它没有用。它应该保存为其他东西吗？我不知道从哪里开始。我查看了 CSS 和 SASS 等之间的区别，但仍然看不到如何让它工作。

标签： javascript css compiled

【解决方案1】：

笔使用 AngularJS 脚本。要解决这个问题，您需要在 JavaScript 文件中嵌入 AngularJS CDN：

https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.min.js

【讨论】：

【解决方案2】：

您确定您已经重新创建了所有内容吗？该动画的创建者使用 JavaScript 的 AngularJS 库。你们一定错过了。我刚刚从那个 CodePen 复制粘贴了所有内容，它工作正常。归功于动画的创作者。

var app = angular.module('app', []);

app.controller('AppController', ['$scope', '$getsvg', '$interval',
    function($scope, $getsvg, $interval)
    {

        // Get SVG
        $getsvg.then(function(response) {
            var items = [];

            angular.forEach(response.data.feed.entry, function(value, key) {
                this.push({
                    svg: value['gsx$svg']['$t'],
                    hex: value['gsx$hex']['$t']
                });
            }, items);

            $scope.items = items;
        });

    }
]);

app.factory('$getsvg', ['$http',
    function($http)
    {
        var url = 'https://spreadsheets.google.com/feeds/list/1hajansd_PujIMHSBcYUo7RNCIdHYIFYWAJHEVRqE4rc/od6/public/values?alt=json';
        
        return $http.get(url);
    }
]);

@-webkit-keyframes anim {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(1028%, 1563%, 0);
            transform: translate3d(1028%, 1563%, 0);
  }
  30%, 70% {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
  100% {
    opacity: 0;
    -webkit-transform: translate3d(978%, -1544%, 0);
            transform: translate3d(978%, -1544%, 0);
  }
}
@keyframes anim {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(954%, 1346%, 0);
            transform: translate3d(954%, 1346%, 0);
  }
  30%, 70% {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
  100% {
    opacity: 0;
    -webkit-transform: translate3d(1055%, 721%, 0);
            transform: translate3d(1055%, 721%, 0);
  }
}
body {
  background: #1a1a1a;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}

svg {
  height: 100%;
  left: 0;
  position: relative;
  width: 100%;
}
svg polygon {
  opacity: 0;
  transform-box: fill-box;
  -webkit-animation: anim 6s ease-in-out infinite;
  animation: anim 6s ease-in-out infinite;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.min.js"></script>
<div ng-app="app" ng-controller="AppController">
    
    <svg viewBox="0 0 605 804">
        <polygon ng-repeat="item in items" ng-class="item.class" fill="{{item.hex}}" points="{{item.svg}}"/>
    </svg>
    
</div>

【讨论】：