标签: css-transitions

我有一个问题使用css3过渡如何使过渡平滑它立即出现
我希望div盒慢慢改变其高度当我将鼠标悬停在它上面

HTML代码

<div id="imgs">

<img src="http://chat.ecobytes.net/img/emoticons/smile.png" alt=":)" title=":)" />
<img src="http://chat.ecobytes.net/img/emoticons/sad.png" alt=":(" title=":(" />
<img src="http://chat.ecobytes.net/img/emoticons/wink.png" alt=";)" title=";)" />
<img src="http://chat.ecobytes.net/img/emoticons/razz.png" alt=":P" title=":P" />
<img src="http://chat.ecobytes.net/img/emoticons/grin.png" alt=":D" title=":D" />
<img src="http://chat.ecobytes.net/img/emoticons/plain.png" alt=":|" title=":|" />
<img src="http://chat.ecobytes.net/img/emoticons/surprise.png" alt=":O" title=":O" />
<img src="http://chat.ecobytes.net/img/emoticons/confused.png" alt=":?" title=":?" />
<img src="http://chat.ecobytes.net/img/emoticons/glasses.png" alt="8)" title="8)" />
<img src="http://chat.ecobytes.net/img/emoticons/eek.png" alt="8o" title="8o" />
<img src="http://chat.ecobytes.net/img/emoticons/cool.png" alt="B)" title="B)" />
<img src="http://chat.ecobytes.net/img/emoticons/smile-big.png" alt=":-)" title=":-)" />

</div>

的jsfiddle

我无法在此页面上进行转换,任何人都知道为什么？

div.sicon a {
    transition: background 0.5s linear;
    -moz-transition: background 0.5s linear; /* Firefox 4 */
    -webkit-transition: background 0.5s linear; /* Safari and Chrome */
    -o-transition: background 0.5s linear; /* Opera */
    -ms-transition: background 0.5s linear; /* Explorer 10 */
}

我正在尝试使用css3过渡来扩大div的宽度和高度:hover.

它工作正常,但我需要更改动画的锚点.

至于现在它设置在div的左下角,我需要它从左上角开始.

那可能吗 ？

谢谢

http://jsfiddle.net/nicktheandroid/5Ytnj/

当我添加-webkit-backface-visibility: hidden;到.circ元素时,它会使它在动画完成后保持像素化.

我想知道是否有办法让它在动画时不像素化.我在Google Chrome的开发版中查看了它.

我想提供不同的javascript文件,具体取决于浏览器是否支持CSS3过渡.有没有比我下面的代码更好的方法来检测转换支持？

window.onload = function () {
    var b = document.body.style;
    if(b.MozTransition=='' || b.WebkitTransition=='' || b.OTransition=='' || b.transition=='') {
        alert('supported');
    } else {
        alert('NOT supported')
    }
}

显示然后隐藏动画指示符/微调器GIF是向用户显示其操作有效以及在等待操作完成时发生某些事情的好方法 - 例如,如果操作需要从服务器加载某些数据(s )通过AJAX.

我的问题是,如果减速的原因是处理器密集的功能,gif会冻结.

在大多数浏览器中,GIF会在执行处理器饥饿功能时停止动画.对于用户来说,这看起来有些事情已经崩溃或发生故障,而实际上它正在工作.

JSBIN示例

注意:"这很慢"按钮会占用处理器一段时间 - 对我来说大约10秒钟,将根据PC规格而有所不同.您可以使用HTML中的"data-reps"attr更改它的功能.

• 期望:点击后,动画运行.当过程结束时,文本会发生变化(我们通常也会隐藏指示器,但如果我们让它旋转,示例会更清晰).
• 实际结果:动画开始运行,然后冻结,直到过程结束.这给人的印象是某些东西被打破(直到突然意外地完成).

如果JS保持处理器忙,有没有办法表明正在运行的进程没有冻结？如果没有办法制作动画片,我会依靠显示然后隐藏静态文字信息Loading...或类似内容,但动画看起来更活跃.

如果有人想知道我为什么使用处理器密集型的代码而不是通过优化来避免问题:这很多都是复杂的渲染.代码非常高效,但它的功能很复杂,因此对处理器的要求总是很高.它只需要几秒钟,但这足以让用户感到沮丧,并且有很多研究可以追溯到很长一段时间,以证明指标对用户体验有利.

处理器繁重函数的gif微调器的第二个相关问题是,在一个同步集中的所有代码都运行之前,微调器实际上并不显示 - 这意味着它通常不会显示微调器,直到隐藏微调器为止.

• JSBIN示例.
• 我在这里找到的一个简单修复(在上面的另一个示例中使用)是在setTimeout( function(){ ... },50);以非常短的间隔显示指示符之后包装所有内容,以使其异步.这是有效的(见上面的第一个例子),但它不是很干净 - 我确信有更好的方法.

我确信必须有一些标准的处理器密集型加载指标的方法,我不知道 - 或者只是使用Loading...文本是正常的setTimeout？我的搜索没有任何结果.我已经阅读了6或7个关于类似声音问题的问题,但它们都变得无关紧要.

编辑评论中的一些很棒的建议,以下是我确切问题的一些细节:

• 复杂的过程涉及处理大型JSON数据文件(如加载文件后的内存中的JS数据操作操作),以及基于结果的渲染SVG(通过Raphael.js)可视化,包括复杂,详细的可缩放世界地图.来自JSON的数据处理.因此,有些需要DOM操作,有些则不需要.
• 不幸的是,我确实需要支持IE8 但是如果有必要,我可以给IE8/IE9用户一个最小的后备Loading...文本,并给其他人一些现代的东西.

我正在尝试做的很简单:将一些SVG点缩放scale(0)到scale(1)使用vanilla js悬停兄弟元素时.它们是演示中的红色

这是基本的SVG设置

<?xml version="1.0" encoding="utf-8" ?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
      x="0px" y="0px" viewBox="0 0 720 576" style="enable-background:new 0 0 720 576;" xml:space="preserve">
    <style type="text/css">
        .st3 {
            fill:red;
        }
        * {
            -webkit-transition:.3s;
            transition:.3s;
        }
    </style>
    <g id="Layer_4">
        <!-- Shield -->
        <path class="st8" d="M601,304.7c-32.4-15.4-68.6-24-106.8-24c-40.4,0-78.5,9.6-112.3,26.6c4.9,79.7,41.9,146.7,109.5,187.6
            C559.8,454.1,597,385.6,601,304.7z" />
        <path class="st9" d="M420.1,328.7c2.1-4.7,32.5-23.9,72.5-23.9c39.9,0,73.1,20,75.5,24.3c2.4,4.3,5.7,40-12.7,74.6
                c-19.7,36.9-53.5,50.1-61.8,50.4c-6.4,0.2-41.8-14.3-62.5-51.6C411.5,367.4,418,333.4,420.1,328.7z" />
        <circle class="st10" cx="494.9" cy="373.3" r="35.5" />
    </g>
    <g id="Layer_8">
        <!-- Dots on shield -->
        <circle class="st3" cx="578.8" …

我正在尝试创建一个div,它会在单击按钮时显示/隐藏.该UI引导页面显示了使用CSS转换一个不错的简单的例子.

这是我的小提琴,我复制他们的代码,几乎完全(稍微改变使html语法突出显示工作,以及在js中声明我的"app"的行).

正如您所看到的,它在示例中不起作用 - 没有转换.为什么不？也许需要一个css转换规则 - 但这不是bootstrap.css提供的那部分吗？

对于后代,来自小提琴的等效html文件将是:

<html>
<head>
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" />
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.0/ui-bootstrap.js"></script>

</head>
<body ng-app="my_app">
    <div ng-controller="CollapseDemoCtrl">
        <button class="btn btn-default" ng-click="isCollapsed = !isCollapsed">Toggle collapse</button>
        <hr />
        <div collapse="isCollapsed">
            <div class="well well-lg">Some content</div>
        </div>
    </div>
</body>
</html>

和等效的.js将是:

var my_app = angular.module('my_app', ['ui.bootstrap']);

my_app.controller('CollapseDemoCtrl', function ($scope) {
    $scope.isCollapsed = false;
});

谢谢!

我有一个微型应用程序，在屏幕上显示一个点。

这是绑定到NgRx存储中的状态的简单div。

<div class="dot"
   [style.width.px]="size$ | async"
   [style.height.px]="size$ | async"
   [style.backgroundColor]="color$ | async"
   [style.left.px]="x$ | async"
   [style.top.px]="y$ | async"
   (transitionstart)="transitionStart()"
   (transitionend)="transitionEnd()"></div>

点状态更改由CSS过渡设置动画。

.dot {
  border-radius: 50%;
  position: absolute;

  $moveTime: 500ms;
  $sizeChangeTime: 400ms;
  $colorChangeTime: 900ms;
  transition:
    top $moveTime, left $moveTime,
    background-color $colorChangeTime,
    width $sizeChangeTime, height $sizeChangeTime;
}

我有一个后端，它推送点的更新（位置，颜色和大小）。我将这些更新映射到NgRx动作上。

export class AppComponent implements OnInit {
  ...

  constructor(private store: Store<AppState>, private backend: BackendService) {}

  ngOnInit(): void {
    ...

     this.backend.update$.subscribe(({ type, value }) => {
       // TODO: trigger new NgRx action when all animations …

a {
    float: left;
    width: 32px;
    height: 32px;
    text-align: left;
    text-indent:-9999px;
    background: url('../img/button.png') no-repeat 0 0;

    -webkit-transition: background 300ms ease-in 2s; /* property duration timing-function delay */
    -moz-transition: background 300ms ease-in 2s;
    -o-transition: background 300ms ease-in 2s;
    transition: background 300ms ease-in 2s;


    -webkit-transition-property: background;
    -webkit-transition-duration: 300ms;
    -webkit-transition-timing-function: ease-in;
    -webkit-transition-delay: 100ms;

    -moz-transition-property: background;
    -moz-transition-duration: 300ms;
    -moz-transition-timing-function: ease-in;
    -moz-transition-delay: 100ms;

    -o-transition-property: background;
    -o-transition-duration: 300ms;
    -o-transition-timing-function: ease-in;
    -o-transition-delay: 100ms;

    transition-property: background;
    transition-duration: 300ms;
    transition-timing-function: ease-in;
    transition-delay: 100ms;

}

a:hover {
    background:position: 0 -32px; …