Question

我想在6秒钟后使用animate.css重复摇动动画。

这是我到目前为止尝试过的代码。

动画的第一部分效果很好，但第二部分效果很好。只是没有。

使用JavaScript，我可以将setTimeout在6秒钟后触发，移除摇动动画，然后将摇动类添加回元素，问题就在这里，尽管setTimeout触发了，但是第二次摇动动画却没有出现（动画预计会在6秒后出现）

// First Part: Adding animation to the object 

    document.querySelectorAll(".profile")[userA_Index].classList.add('animated', 'shake', 'slow', 'delay-1s')


//Second Part: Now I remove the first shake animation and add the second one after 6 seconds, But unexpectedly the animation here doesn't work...

    setTimeout(function(){ 
    document.querySelectorAll(".profile")[userA_Index].classList.remove('animated', 'shake')
    document.querySelectorAll(".profile")[userA_Index].classList.add('animated', 'shake', 'slow', 'delay-1s')
    }, 6000);

Answer 1

由于缺乏适当的词汇，我将这样解释：

当您在同一DOM更新中添加和删除相同的类时，这被视为单个DOM修改，看起来好像什么都没有改变。

添加第二个setTimeout，以在第一次更新后推送单独的DOm更新：

import numpy as np
import pandas as pd
import warnings
from bokeh.layouts import widgetbox
from bokeh.plotting import figure, show, output_file, output_notebook
from bokeh.palettes import Spectral11, colorblind, Inferno, BuGn, brewer
from bokeh.models import HoverTool, value, LabelSet, Legend, ColumnDataSource, LinearColorMapper, BasicTicker, PrintfTickFormatter, ColorBar
from bokeh.models.widgets import DateRangeSlider, CheckboxButtonGroup
from bokeh.models import CustomJS, ColumnDataSource
from bokeh.layouts import column, row
from json import loads
import ast
import datetime as dt

warnings.filterwarnings('ignore')

TOOLS = 'save,pan,box_zoom,reset,wheel_zoom'
p = figure(title="data", plot_height=400, tools=TOOLS, plot_width=1300)

start_date = dt.datetime.strptime('2019 04 15', '%Y %m %d')
end_date = dt.datetime.strptime('2019 04 18', '%Y %m %d')
t = np.arange(0.0, 2.0, 0.01)
dates = np.arange(start_date, end_date, np.timedelta64(1, 'h'),
                  dtype='datetime64')

x = np.sin(3*np.pi*t)[:72]
y = np.cos(3*np.pi*t)[:72]
z = np.cos(6*np.pi*t)[:72]

for c in [x, y, z]:
    c[40:50] = np.nan

source = ColumnDataSource(data={'Date': dates, 'x': x, 'y': y, 'z': z})

p.xaxis.axis_label = 'Date'
p.yaxis.axis_label = 'Position (m)'


def add_plot(y, color):
    new_plot = p.line(x='Date', y=y, line_width=1, color=color, source=source)
    return new_plot


x = add_plot('x', 'red')
y = add_plot('y', 'green')
z = add_plot('z', 'blue')

checkbox = CheckboxButtonGroup(labels=['x', 'y', 'z'], active=[0, 1, 2])
checkbox.callback = CustomJS(args=dict(x=x, y=y, z=z), code="""
    //console.log(cb_obj.active);
    x.visible = false;
    y.visible = false;
    z.visible = false;
    for (i in cb_obj.active) {
        //console.log(cb_obj.active[i]);
        if (cb_obj.active[i] == 0) {
            x.visible = true;
        } else if (cb_obj.active[i] == 1) {
            y.visible = true;
        } else if (cb_obj.active[i] == 2) {
            z.visible = true;
        }
    }
""")

callback = CustomJS(args=dict(p=p), code="""
    var a = cb_obj.value;
    p.x_range.start = a[0];
    p.x_range.end = a[1];
""")

range_slider = DateRangeSlider(start=start_date, end=end_date,
                               value=(start_date, end_date), step=1)
range_slider.js_on_change('value', callback)


def get_hovertools():
    hovers = {'x': x, 'y': y, 'z': z}
    for k, v in hovers.items():
        hovers[k] = HoverTool(mode='vline', renderers=[v])
        hovers[k].tooltips = [('Date', '@Date{%F %H:%M:%S.%u}'),
                              (k, '@{'+k+'}{%0.2f}m')]
        hovers[k].formatters = {'Date': 'datetime', k: 'printf'}
        p.add_tools(hovers[k])


get_hovertools()
# --------------------- second figure here --------------------------
p2 = figure(title="data", plot_height=400, tools=TOOLS, plot_width=1300)

start_date = dt.datetime.strptime('2019 04 15', '%Y %m %d')
end_date = dt.datetime.strptime('2019 04 18', '%Y %m %d')
t = np.arange(0.0, 2.0, 0.01)
dates = np.arange(start_date, end_date, np.timedelta64(1, 'h'),
                  dtype='datetime64')

x2 = [1]*72
y2 = [2]*72
z2 = [3]*72

source = ColumnDataSource(data={'Date': dates, 'x': x2, 'y': y2, 'z': z2})


def add_plot(y, color):
    new_plot = p2.line(x='Date', y=y, line_width=1, color=color, source=source)
    return new_plot


x2 = add_plot('x', 'red')
y2 = add_plot('y', 'green')
z2 = add_plot('z', 'blue')

layout = column(p, widgetbox(checkbox), widgetbox(range_slider),
                p2)

show(layout)

使用animate.css在第一个动画后重复相同的动画6s [编辑]

1 个答案: