相关疑难解决方法(0)

CSS转换完成后是否可以获得通知(如回调)？

在css3动画的情况下有没有办法实现回调函数？在Javascript动画的情况下,它可能但在css3中找不到任何方法.

我可以看到的一种方法是在动画持续时间之后执行回调,但这并不能确保在动画结束后立即调用它.它取决于浏览器UI队列.我想要一个更强大的方法.任何线索？

我有$('.element').css("color","yellow"),我需要下一个事件只在这之后,看起来$('.element').css("color","yellow",function(){ alert(1); }) 我需要这个因为:

$('.element').css("color","yellow");
 alert(1);

事件几乎都在一次发生,这一刻调用动画效果中的bug(例如,alert(1)就在这里,在实际模块中它是动画)

我试图让文本"摆动",通过一种方式应用旋转过渡,然后在悬停时通过下一种方式旋转.但是,它不会等待第一次转换完成,因此看起来只应用了最后一次转换.如何强制它等待第一次转换完成？JSfiddle:http://jsfiddle.net/hari_shanx/VRTAf/7/

HTML:

<div id="chandelier">
    <nav>
        <ul id="chandelier-list">
            <li id="logo-home" class="swing"><a href="#home" class="scrollPage">home</a>

            </li>
            <li id="logo-about" class="swing"><a href="#about" class="scrollPage">about us</a>

            </li>
            <li id="logo-range" class="swing"><a href="#range" class="scrollPage">our range</a>

            </li>
            <li id="logo-contact" class="swing"><a href="#contact" class="scrollPage">contact us</a>

            </li>
            <li id="logo-blog" class="swing"><a href="#blog" class="scrollPage">blog</a>

            </li>
        </ul>
    </nav>
</div>

CSS:

.swing {
    position: absolute;
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    transform: rotate(-90deg);
    writing-mode: lr-tb;
    -webkit-transform-origin: right top;
    -moz-transform-origin: right top;
    -ms-transform-origin: right top;
    -o-transform-origin: right top;
    transform-origin: right top;
    font-size: 18px;
    -webkit-transition: all …

我有一个可见性被切换的元素ng-show.我也在使用CSS动画 - 来自ng-animate的自动动画 - 在这个元素上为它的入口设置动画.

元素将包含图像或视频.

在元素包含视频的情况下,我想播放它,但我不想播放视频,直到完成动画制作.

因此,我想知道是否有一种简单的方法将回调绑定到AngularJS中CSS动画的结尾？

该文档引用doneCallback,但我看不到的方式来指定它...

一种解决方法(？)我想到的是$watch荷兰国际集团element.hasClass("ng-hide-add-active"),并等待它用火(true, false),这意味着它只是被删除..

有更好的方法吗？

我正在尝试对以可滚动容器div为中心的div进行缩放转换.

我用来反映转换后的新div大小的技巧是使用包装器并为其设置新的宽度/高度,以便父级可以正确显示滚动条.

.container {
    position: relative;
    border: 3px solid red;
    width: 600px; height: 400px;
    background-color: blue;
    overflow-x: scroll; overflow-y: scroll;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}
.wrapper {
    order: 1;
    background-color: yellow;
}
.content-outer {
    width: 300px;
    height: 200px;
    transform-origin: 50% 50%;
    /*transform-origin: 0 0;*/
}
.content-outer.animatted {
    animation: scaleAnimation 1s ease-in forwards;
}
.content-outer.animatted2 {
    animation: scaleAnimation2 1s ease-in forwards;
}
.content-inner {
    width: 300px;
    height: 200px;
    background: linear-gradient(to right, red, white);
}

如果转换原点是0,0 div在没有动画跳跃的情况下居中,但滚动条不正确.如果原点位于中间,则div位置和滚动条都会被错过

我尝试了两种方法来进行居中,使用flexbox( …

一旦页面加载,我想一个接一个地"出现"三个DIV.

我怎样才能做到这一点？

我知道如何在鼠标悬停时出现单个div而没有任何触发,一个接一个地使用css,我怎样才能实现这样的平滑过渡？

试图弄清楚如何使用普通的javascript和css做到这一点，下面是使用jquery的代码。

在此示例中，用户单击链接，脚本检查以查看div中是否有内容，如果存在，则淡出该内容，然后通过ajax加载新内容并淡入。

我知道我可以切换CSS类，但是想知道如何使用回调查看CSS动画何时完成才能触发Ajax请求然后淡入。

<section>
    <a href="#" data-file="data1">Load data 1</a>
    <a href="#" data-file="data2">Load data 2</a>
    <div id="content"></div>
</section>

$(document).ready(function(){
    $('body').on('click','a',function(event){
        event.preventDefault();
        var datafile = $(this).data('file');
        console.log(datafile);
        if($('#content').html().length){
            $('#content').fadeOut(700,function(){
                $('#content').load(datafile + '.php').hide().fadeIn(700);
                console.log('has content, fadeout then load fadein ' + datafile);
            })
        } else {
            $('#content').load(datafile + '.php').hide().fadeIn(700);
            console.log('no content, load fadein ' + datafile);
        }
    });
});

data1.php和data2.php的内容仅出于测试目的而用lorem ipsum填充，在生产中，它们将是cms的界面屏幕。

这是一个jsfiddle https://jsfiddle.net/nomadwebdesign/cfvd6uk4/

查看Dan Dascalescu的答案以及如何扩展此方法如何使用JavaScript和CSS进行淡入和淡出

我也一直在尝试使用on（'transitionend'）事件侦听器，但是它进入了一个循环，因为在由ajax加载后，我删除了导致再次过渡的css类。

我可以通过使用setTimeout并匹配过渡持续时间来做到这一点，但这似乎很不稳定。

在这一点上，我只想知道如何使用jQuery和CSS而不使用fadeIn（）和fadeOut（）

单击顺序->淡出先前的内容->淡入ajax加载的内容

更新 …

我正在使用css过渡来设置我的一个div的边距.我需要知道如何等待这个效果结束所以我可以调用其他功能然后......有什么办法吗？我读了一些关于堆栈溢出的其他帖子,但它们看起来与我的问题不同.

动画完成后使用jQuery可以计算元素的大小吗？我的简化示例是:

<style>
  .brick
  {
    transition: all 0.4s ease-in-out;
  }
  .large
  {
    width: 400px;
    height: 400px;
  }
  .small
  {
    width: 200px;
    height: 200px;
  }
</style>

<script>
  $('.brick').removeClass('small').addClass('large');
  $('.brick').height(); // returns 200px but desired 400px
  $('.brick').width();  // returns 200px but desired 400px
</script>

我不能等到动画完成后才能获得大小,我不能硬编码JS中的任何大小.有任何想法吗？

编辑:小尺寸和大尺寸的错字